阻止jQuery UI对话框将焦点设置为第一个文本框

Question

我已经设置了一个jQuery UI模式对话框,以便在用户单击链接时显示.在该对话框div标签中有两个文本框(我只为简洁显示1的代码),它被更改为对焦点做出反应的jQuery UI DatePicker文本框.

问题是jQuery UI对话框('open')以某种方式触发第一个文本框具有焦点,然后触发datepicker日历立即打开.

所以我正在寻找一种方法来防止焦点自动发生.

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

Answer 1

jQuery UI 1.10.0 Changelog将故障单4731列为已修复.

看起来没有实现focusSelector,而是使用了对各种元素的级联搜索.从机票:

扩展自动对焦,从[autofocus]开始,然后:tabbable内容,然后是buttonpane,然后是关闭按钮,然后是对话框

因此,使用autofocus属性标记元素,这是应该获得焦点的元素:

<input autofocus>

在文档中,解释了焦点逻辑(仅在目录下,标题为'Focus'):

打开对话框后,焦点会自动移动到与以下内容匹配的第一个项目:

1. 具有该autofocus属性的对话框中的第一个元素
2. :tabbable对话框内容中的第一个元素
3. :tabbable对话框按钮窗格中的第一个元素
4. 对话框的关闭按钮
5. 对话框本身

Answer 2

在它上面添加一个隐藏的跨度,使用ui-helper-hidden-accessible使其通过绝对定位隐藏.我知道你有这个类,因为你正在使用来自jquery-ui的对话框,它在jquery-ui中.

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

Answer 3

在jQuery UI> = 1.10.2中,您可以_focusTabbable使用安慰剂函数替换原型方法:

$.ui.dialog.prototype._focusTabbable = $.noop;

小提琴

这将影响dialog页面中的所有内容,而无需手动编辑每个页面.

原始函数除了将焦点设置为具有autofocusattribute/tabbableelement/的第一个元素或者回退到对话框本身之外什么都不做.因为它的用途只是设置一个元素,所以应该没有问题替换它noop.

Answer 4

我找到了以下代码,jQuery UI对话框函数用于打开.

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

您可以解决jQuery行为或更改行为.

tabindex -1用作解决方法.

Answer 5

从jQuery UI 1.10.0开始,您可以使用HTML5属性 自动聚焦选择要关注的输入元素.

您所要做的就是在对话框中创建一个虚拟元素作为第一个输入.它将为您吸收焦点.

<input type="hidden" autofocus="autofocus" />

这已在2013年2月7日在Chrome,Firefox和Internet Explorer(所有最新版本)中进行了测试.

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

Answer 6

在玩的时候想出这个.

我发现使用这些解决方案来移除焦点,导致ESC键在第一次进入Dialog时停止工作(即关闭对话框).

如果对话框打开,并立即按ESC,也不会关闭对话框(如果您有启用),因为重点是对一些隐藏字段或什么的,并没有得到按键事件.

我修复它的方法是将其添加到open事件中以从第一个字段中删除焦点:

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

这会将焦点设置到不可见的对话框,然后ESC键可以正常工作.

Answer 7

将输入的tabindex设置为-1,然后设置dialog.open以在以后需要时恢复tabindex:

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});

Answer 8

我的解决方法:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  

Answer 9

我的内容比对话框长.在打开时,对话框将会弹到第一个:位于底部的tabbable.这是我的修复.

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});

Answer 10

简单的解决方法:

只需使用tabindex = 1创建一个不可见的元素...这不会聚焦datepicker ...

例如.:

<a href="" tabindex="1"></a>
...
Here comes the input element