必须单击两次按钮才能激活"contenteditable"

Question

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

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

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

Bootply示例演示问题

Answer 1

这不是100%的解决方案，而是一种变通方法，但它可能会达到您想要达到的效果:您可以将文本包装在span中的<button>标记内，并将其类设置为"editable"。

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

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

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

这个<<p>看到,strong>短演示。