c# - 在 JQuery 对话框内的文本框上初始化时，虚拟键盘 (Keith Wood) 会在每次单击时自行关闭

Question

更新——jsfiddle:http://jsfiddle.net/bLURx/4/

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

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

到此为止一切正常。我不得不更改弹出键盘的 z-index，以便它们出现在对话框上方，但现在我可以单击每个框，键盘将按原样滑入。每当我单击 键盘上的任何按钮时都会出现问题。单击任何按钮后，每个键盘都会自行关闭并在表格中顶部 行上方打开一个键盘。单击此顶部小键盘将保持打开状态，但它不会向任何字段添加文本。

用于对话框/初始化弹出键盘的 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>

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

谢谢!

Answer 1

确定解决了:-)

演示: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 类，如果有，则允许它。这很好地解决了问题。