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