jqueryui对话框无法在firefox 11中“选择（）”输入答案

【问题标题】：jqueryui dialog not able to `select()` input in firefox 11jqueryui对话框无法在firefox 11中“选择（）”输入
【发布时间】：2012-04-06 02:20:03
【问题描述】：

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

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

没有选择输入中的值，这在 Chrome 和 IE 中确实如此，如果我手动调用 select() 方法也不起作用。

这是一个已知问题吗？有什么方法可以选择吗？ Timers work 但如果我在加载后单击 jsfiddle 上的 run，它将不再起作用。

【问题讨论】：

标签： javascript jquery jquery-ui firefox

【解决方案1】：

看起来像在 Chrome 上调用 focus()（jquery-ui 默认对第一个可选项卡元素执行此操作）（无法测试 IE -- 在 OS X 上）聚焦框并选择框内的文本。

取自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>

left 有以下代码：

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

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

【讨论】：

我没有机会进一步研究这个。我会说这可能是Firefox中的一个错误。您是否发现了其他相关信息或最终找到了解决方案？
没有什么确定的，只是一堆理论。我将在这个问题上认输，并接受不同的浏览器将获得不同的用户体验这一事实

【解决方案2】：

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

$('<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/

【讨论】：

【解决方案3】：

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

【讨论】：