Question

我正在使用jQuery contenteditable=true事件将按钮的属性动态设置为click()。

$('.editable').on('click', function(e) {
    $(this).attr('contenteditable','true');
    //$(this).focus(); -- setting this causes blur after typing one character
});

问题是必须单击按钮两次才能触发编辑。我尝试过使用focus()，但这会导致在按钮中只输入一个字符后触发blur()事件。相同的click处理程序适用于编辑其他元素（即; DIV）。

Bootply Example 证明了这个问题。

Answer 1

它不是100％的解决方案，而是一种解决方法，但它可能具有您想要实现的效果：您可以将文本包装在范围内的<button>标记内，并将其类设置为“可编辑”

<button id="editBtn" type="button">
    <span class="editable">Click to edit me</span>
</button>

然后你必须专注于点击，例如那样：

$(".editable").on("click", function(evt) {
    $(this).attr("contenteditable", "true")
           .focus();
});

另请参阅此 short demo 。

必须单击按钮两次以激活“contenteditable”

1 个答案: