虚拟键盘(Keith Wood）在JQuery对话框内的文本框上初始化时，每次点击都会自动关闭

Virtual Keypad (Keith Wood) closes itself on every click when initialized on textboxes inside a JQuery Dialog

本文关键字：初始化 Wood Keith 键盘 JQuery 文本 对话框 虚拟      更新时间：2023-09-26

更新--jsfiddle：http://jsfiddle.net/bLURx/4/

在我的主屏幕上，我有一个运行良好的虚拟键盘的内联实例。

此屏幕上的表中有一些链接，这些链接将打开包含另一个表的JQuery对话框，其中一列是每行的文本框。我为生成的每个文本框初始化一个小键盘，这样用户就会为每个框都有一个弹出式小键盘来输入一些数字。

到目前为止一切都很顺利。我不得不更改弹出键盘的z索引，使其显示在对话框上方，但现在我可以单击每个框，键盘将按原样滑入。每当我单击键盘上的任何按钮时，就会出现问题。单击任何按钮后，每个小键盘都会自行关闭，并在表中顶部行上方打开一个小键盘。单击后，顶部键盘将保持打开状态，但它不会向任何字段添加文本。

对话框/初始化弹出键盘的jQuery功能：

$(function () {
        var createdPads = []; 
        $('#dialog').dialog({
            autoOpen: false,
            modal: true,
            width: '95%',
            height: 1000,
            open: function (event, ui) {
                $('#dialog :text').each(function () {
                    $(this).keypad({
                        keypadOnly: false,
                        keypadClass: 'miniPad'
                    });
                    createdPads.push(this);
                });
            },
            close: function (event, ui) {
                for (i = 0; i < createdPads.length; i++) {
                    createdPads[i].remove();//removing created keypads because they were affecting the previous inline keypad 
                }
                $('#<%=enterNumberBox.ClientID%>').blur();//removing focus from original field
                var tbl = $('#<%=gvData.ClientID%>');
                if (tbl.is(":visible")) { //scrolling back down to results after dialog close
                    $(window).scrollTop(tbl.position().top);
                }
            }
        });
    });

弹出式键盘的CSS类：

.miniPad{
    z-index: 9999 !important; 
}

HTML:

<div id="dialog" style="display: none; text-align: center;">
    <span class="ui-helper-hidden-accessible"><input type="text"/></span><!--to prevent autofocus-->    
    <asp:GridView runat="server" ID="gvItemData"></asp:GridView>
    <asp:Button ID="updateStagedButton" runat="server" Text="Update" OnClientClick="return validateUpdate();" />
</div>

一旦我有足够的代表，我会添加一张我正在谈论的内容的截图。

谢谢！

OK解决了它：-(

演示：http://jsfiddle.net/robschmuecker/Tut8M/

据推测，这确实与对话有关。默认情况下，它会阻止与非其子元素的任何交互，这会在它们被绝对定位为时导致问题

http://api.jqueryui.com/dialog/#method-_allowInteraction

值得庆幸的是，我们可以通过设置_allowIteraction()功能

$.ui.dialog.prototype._allowInteraction = function (e) {
        return !!$(e.target).parents(".miniPad") || this._super(event);
    };

这会检查被交互的元素是否有一个类为miniPad的父元素，如果有，则允许。这很好地解决了问题。

相关文章：