最终代码：

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); });

Answer 2

您必须使用＆lt; input＆gt;标签，即

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

应该是

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

Answer 3

文本选择应在jquery.editable创建输入后进行。 Jquery.editable将在点击时创建输入，因为它绑定到id。因此，需要一个计时器，以便有足够的时间进行可编辑创建输入，然后激活javascript函数来选择新创建的输入中的文本

<h6 id="editable_field">Add Note Here...</h6>
$('#editable_field').editable(); 

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

fiddle

无法在点击时选择jQuery中的完整文本

3 个答案:

最终代码：