javascript - 如何使 onClick 按钮单击 contenteditable 元素

Question

所以我在某些内容上使用 contenteditable 函数。我认为这对用户不太友好，因为人们看不到他们必须单击内容才能编辑它。因此，我想要一个显示“编辑”的按钮，然后它将引导您进入可编辑的内容。像这样的东西。

$('#editButton').click(function(){
    $('#editable').trigger('click');
});

我做了一个测试示例，当我单击按钮时，它应该单击文字。但它不会激活 contenteditable 功能，即使它确实单击了该段落!我知道它会点击它，因为我尝试在点击时向该段落添加警报，并且每当您单击该按钮时它都会执行此警报。

您可以在下面的代码片段中亲自尝试一下:

<p id="editable" contenteditable="true">This content is editable</p>
<button id="editButton">Edit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('#editable').click(function(){
 alert('the paragraph was clicked');
});

$('#editButton').click(function(){
 $('#editable').trigger('click');
});
</script>

Answer 1

$('#editable').click(function(){

});

$('#editButton').click(function(){
 $('#editable').focus();
});

<p id="editable" contenteditable="true">This content is editable</p>
<button id="editButton">Edit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>