Edit the text of a div and her children by clicking

Asked

Viewed 146 times

1

How to edit a text div or your children by clicking on the text, with Javascript or jQuery?

Example, by double-clicking on Text here it is possible to change the text and/or delete it

#alterar {background:#e3e3e3;padding:15px;}
#naoAlterar {background:#ccc;padding:5px;margin:-5px}
<div id="alterar">
Texto aqui
<p>Texto aqui</p>
<span>Texto aqui</span>
<br/><br/>
<div id="naoAlterar">Texto aqui</div>
</div>

javascript jquery

  • The dblclick event is sent to an element when the element is clicked twice. Any HTML element can receive this event. https://api.jquery.com/dblclick/

1 answer

1


You can add to the div contentEditable="true"to make the widget editable: Developer.mozilla.org

Since you only want this from the double click, you can do this using an event:

$('#banner-message').dblclick(function() {
   $(this).attr("contentEditable","true");
});

$('#banner-message').blur(function() {
   $(this).attr("contentEditable","false");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message" >
  <p>Hello World</p>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.