如何使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>

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>