Как изменить динамический текст с помощью JQuery

Question

Как изменить текст динамически. SO, когда я дважды щелкаю по тексту, он появляется во входе, и я могу просто очистить текст и написать другое.

Вот мой исходный код Jsfiddle

<div id="main_text"> 
    <h1>Change Text</h1> 
</div> 



$('.main_text').dblclick(function(){ 
    var val = $("#main_text").value(); 

}); 

Answer 1

Нечто подобное может помочь вам:

$('#main_text').dblclick(function(){ 
 
    var $elm = $(this); 
 
    
 
\t $elm.find("h1").replaceWith($("<input />", { 
 
    \t val: $elm.text(), 
 
     change: function(){ 
 
      var text = $(this).val(); 
 
      
 
     \t $elm.html($("<h1 />", { 
 
      \t text: text 
 
      })); 
 
     } 
 
    })); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main_text"> 
 
    <h1>Change Text</h1> 
 
</div>

Рабочий пример: http://jsfiddle.net/006853mL/1/

Answer 2

Это должно сделать трюк:

Edit: я добавил KeyListener. Если вы нажмете Enter, он применит изменения.

$('#main_text').dblclick(function() { 
 
    var currentText = $(this).children('h1').text(); 
 
    $(this).children('h1').replaceWith('<input class="change" type="text" value="' + currentText + '"/>'); 
 
    $('.change').keyup(function(e) { 
 
    if (e.keyCode == 13) { 
 
     var currentText = $('.change').val(); 
 
     $(this).replaceWith('<h1>' + currentText + '</h1>'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main_text"> 
 
    <h1>Change Text</h1> 
 
</div>