Please tell me there is a code in which by clicking on the span is changed to input.

$(function () { //Loop through all Labels with class 'editable'. $(".editable").each(function () { //Reference the Label. var label = $(this); //Add a TextBox next to the Label. label.after("<input type = 'text' style = 'display:none' />"); //Reference the TextBox. var textbox = $(this).next(); //Set the name attribute of the TextBox. textbox[0].name = this.id.replace("lbl", "txt"); //Assign the value of Label to TextBox. textbox.val(label.html()); //When Label is clicked, hide Label and show TextBox. label.click(function () { $(this).hide(); $(this).next().show(); }); //When focus is lost from TextBox, hide TextBox and show Label. textbox.focusout(function () { $(this).hide(); $(this).prev().html($(this).val()); $(this).prev().show(); }); }); }); 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <span id="lblName" class="editable">Mudassar</span><p>Изменить</p>

How to do that when you click on the text to change the span changed to input?

  • You do not have to change the text in the span , but in p . - Stepan Kasyanenko

1 answer 1

Instead of replacing span with input, you can use the attribute contenteditable = "true".

 <span id="lblName" contenteditable="true" class="editable">Mudassar</span><p contenteditable="true">Изменить</p>

  • It is necessary when you click on the text "change" span changed to input. p do not touch. - Vladislav Samokhin