Question

所以我在某些内容上使用了contenteditable函数。我不认为它非常用户友好，因为人们无法看到他们必须点击内容进行编辑。因此，我想要一个显示编辑的按钮，然后会引导您进入可编辑的内容。像这样的东西。

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

我做了一个测试示例，当我点击一个按钮然后它应该点击法律图。但它没有激活contenteditable函数，即使它确实单击该段落！我知道它会点击它，因为我试图在单击时向段落添加警报，并且只要您单击按钮就会执行此警报。

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使onClick按钮单击contenteditable元素

2 个答案: