Given this task, there are several <p> tags, so that the user needs to be able to change them. For example, here's a page with the first element and the second, double-clicked on one of them - an input field appears (instead of text), enter any value, press Enter and that's it: instead of an input field, the text is written by the user! I do not understand at all what I should do and yes, I know that most likely I have complete nonsense written ... But help, please!

HTML

 <p onClick="changeTheName()" class="elementClass">First element</p>

Js

 function changeTheName(){ $('p').dblclick( function () { var element = document.getElementsByClassName('elementClass'); $('p').contents().unwrap(); document.write('<input type="text" id="name">'); $('#name').bind('keypress', function(e) { var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { var name = document.getElementById('name').value; var inputValue = document.getElementById('name'); inputValue.parentNode.removeChild(inputValue); var d = name; document.write('<p onclick="changeTheName()" class="elementClass">' + d + '</p>'); } }); }); }
  • one
    contenteditable ? - user207618
  • @Other thanks, I'll figure it out now! :) - Mark_8

1 answer 1

As an option - here is an example:

HTML:

 <div id="nameContainer"> <span id="name">Введите имя</span> <input type="text" id="nameInput" hidden="hidden" /> </div>

Js:

 $("#name").click(function () { $("#name").hide(); $("#nameInput").val($("#name").text()); $("#nameInput").show(); }); $("#nameInput").keypress(function(e) { if (e.which == 13) { $("#name").text($("#nameInput").val()); $("#nameInput").hide(); $("#name").show(); } });
  • Tell me, how can you make it so that with a large number of such “pieces” of HTML code that you don't have to write a new id each time? I tried through the variable and this.id, but the variable was not passed through functions. - Mark_8
  • @ Mark_8 Honestly, I don’t know the solution right away ... If there is time, I’ll see how to get around this problem :) - spopovru
  • Yes of course. Thank! - Mark_8