jqueryui对话框无法在firefox 11中“select(）”输入

jqueryui dialog not able to `select()` input in firefox 11

本文关键字：select 输入 对话框 firefox jqueryui      更新时间：2023-09-26

我在Windows7上的Firefox 11中运行这段代码。（请参见http://jsfiddle.net/QStkd/)。

$('<div><input type="text" value="val" /></div>').dialog();

​输入中的值没有被选中，这在Chrome和IE中是这样做的，如果我手动调用select()方法，它也不起作用。

这是已知的问题吗？有什么方法可以选择吗？计时器可以工作，但如果我在jsfiddle加载后单击run，它就不再工作了。

这看起来像是在Chrome上调用focus()（jquery ui默认情况下对第一个选项卡元素执行此操作）（不能在OS X上测试IE），它会聚焦框并选择框中的文本。

摘自jquery.dialog.ui.js:

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
    uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
        uiDialog.get()))).eq(0).focus();

另一方面，Firefox似乎只在调用焦点时将光标放在框内。因此，您必须在对话框创建后隐式调用select，以实现您想要做的事情

如果您重新加载计时器fiddle（而不是单击run），您会注意到该示例每次都有效。我认为jsFiddle实际上是罪魁祸首（可能是hashchange事件，或者在按下"run"后某个窗格上的某个焦点事件——我还没有深入研究）。

编辑：（很抱歉，太晚了）看起来"问题"的根本原因是Firefox。不确定这是否是设计行为，但据我所见，Firefox似乎不允许在同一页面上的不同内容窗格内的两个不同输入元素中同时选择文本。这似乎不会影响Chrome（当然也不会影响IE9）。

我在本地做了一个快速的例子，它有两个并排的iframe（让我们称它们为左和右）。左边包含一个文本区域，右边包含您的jquery ui对话框——类似于您发布的fiddle。右边有以下代码：

<script type="text/javascript">
$('<div><input type="text" value="val" /></div>').dialog();
$('input').select();
</script>

左边有以下代码：

<script type="text/javascript">
setTimeout( function() {
    $('textarea').focus();
}, 1000);
</script>

如果你把这些拼凑在一起，在Firefox中查看结果，你会注意到输入是聚焦的并被选中的，直到左边的文本区域被聚焦。我怀疑类似的事情正在jsFiddle中发生。

尝试使用ui对话框的open事件。打开对话框时会触发此事件。

$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({
    open:function(){
     $("#yourInput").focus().select();
    }
        }
)

http://jsfiddle.net/sergeir82/A6Wah/8/

http://jsbin.com/etivej/4/

这是dom中的FF问题，用于确定是否设置了DOCTYPE。没有一个很好的方法来解决它，一个定时器的重点往往是"破解"。然而，还有另一个步骤，如果您的Doctype设置为w3-xhtml标准，则可以使用this将其集中选中。添加onfocus="this.select();"作为输入的属性，这样当它被聚焦时，它会立即被选中。

相关文章：