jqueryui对话框无法在firefox 11中输入`select()`

Question

我在Windows 7上的Firefox 11中运行此代码.(请参阅http://jsfiddle.net/QStkd/).

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

未选择输入中的值,这在Chrome和IE中是这样做的,如果我手动调用该select()方法,它也不起作用.

这是一个已知的问题吗？有没有办法选择它？定时器工作,但如果我run加载后点击jsfiddle它不再工作.

Answer 1

它看起来像focus()在 Chrome 上调用（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 才能实现您想要执行的操作。

如果您重新加载计时器小提琴（而不是单击运行），您会注意到该示例每次都有效。我认为 jsFiddle 实际上是这里的罪魁祸首（可能是 hashchange 事件，或者按下“运行”后某个窗格上的某些焦点事件 - 我还没有深入挖掘）。

编辑：（抱歉，已经晚了）看起来“问题”的根本原因是 Firefox。不确定这是否是设计行为，但从我所看到的来看，Firefox 似乎不允许在同一页面上的不同内容窗格中的两个不同输入元素中同时选择文本。这似乎不会影响 Chrome（假设还有 IE9）。

我在本地做了一个简单的例子，它有两个并排的 iframe（我们称它们为左和右）。左侧包含一个文本区域，右侧包含您的 jquery-ui 对话框 - 类似于您发布的小提琴。右边有如下代码：

<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 中正在发生类似的事情。