Daniel Alsaker Daniel Alsaker - 2 months ago 11
HTML Question

how to make onClick button click contenteditable element

So I am using the contenteditable function on some content. I don't think it's very user friendly as people cannot see that they have to click the content to edit it. Therefore I want a button that says edit and then that will lead you to the editable content. something like this.

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


I made a test example where when I click a button then it should click the pharagraph. But it does not activate the contenteditable function, even though it does click the paragraph! I know that it clicks it, as I tried to add an alert to the paragraph if clicked, and it doed preform this alert whenever you click the button.

You can try it for yourself in the snippet below:



<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

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