如何使onClick按鈕單擊contenteditable元素

Question

所以我在某些內容上使用contenteditable函數。 我認為這不是非常用戶友好的，因為人們看不到他們必須單擊內容才能對其進行編輯。 因此，我需要一個顯示“ edit”（編輯）的按鈕，然后將您帶到可編輯的內容。 這樣的事情。

$('#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> 

Answer 2

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

 <p id="editable" contenteditable="true">This content is editable</p> <button id="editButton">Edit</button> <button id="save">Save </button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>