jquery - 按钮必须点击两次才能激活“contenteditable”

Question

我动态地将按钮的属性设置为contenteditable=true使用 jQueryclick()事件。

$('.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>标签内的文本包装在一个 span 中并将其类设置为“可编辑”。

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

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

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

另请参阅这个简短的演示。