jquery - 无法在单击时选择可编辑的 jQuery 中的完整文本

Question

我正在使用插件 jquery.editable-1.3.3.min.js 并且我正在创建可编辑输入控件，例如

HTML:
<h6 id="editable_field">Add Note Here...</h6>

JS:
 $('#editable_field').editable(); 

以下是我遇到问题的 JS

$('#editable_field').click(function () {
            $(this).select();
        });

所以上面的js不起作用 - 一旦我点击editable_field，它的所有内容都不会被选择。有什么解决办法吗？

这是fiddle 单击时，我希望选择/突出显示整个文本

Answer 1

您需要做的就是选择input而不是h6，如下所示:

HTML

<h6 id="editable_field">Add Note Here...</h6>

JS

$('#editable_field').editable(); 

$('#editable_field').click(function () {
    $(this).find('input').select();
});

jsFiddle

编辑: 这肯定有点 hacky...但它有效 Updated jsFiddle

$('#editable_field').click(function () {
    setTimeout(function() { $('#editable_field input').select(); }, 0);
});

最终代码:

HTML

<h6 id="editable_field">Add Note Here...</h6>

JS

$('#editable_field').editable(); 

$('#editable_field').click(function () {
    setTimeout(function() { $('#editable_field input').select(); }, 0);
});