Texte jQuery à saisir?

Question

J'ai une mise en page simple avec un TextBlock et un <a>, comme:

text1 edit

Lorsque je clique sur le <a>, je veux que ce textblock devienne saisie de texte. Comment est-ce possible avec jQuery?

Answer 1

Utilisez jQuery replaceWith():

$(document).ready(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     $(this).parent().replaceWith("<input />"); 
    }); 
}); 

http://jsfiddle.net/Dqkyg/1/

---

De plus, vous pouvez remplir la zone de texte avec le texte en dehors du lien comme ceci:

$(document).ready(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     var txt = $(".text").html(); 
     $(".text").replaceWith("<input value='" + txt + "' />"); 
    }); 
}); 

http://jsfiddle.net/Dqkyg/5/

---

qui suit remplacera le modifier avec Save & Annuler Options:

<div> 
    <span class="text">testing</span> <a href='#'>test</a> 
</div> 

$(document).ready(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     var txt = $(".text").html(); 
     $(".text").replaceWith("<input value='" + txt + "' />"); 
     $(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>"); 
    }); 
}); 

http://jsfiddle.net/Dqkyg/6/

Answer 2

Il y a beaucoup de plug-ins que vous pouvez utiliser ... Pas besoin de réinventer la roue

http://www.appelsiini.net/projects/jeditable

Answer 3

Hmm ... ur un peu pas clair ... mais http://jsfiddle.net/mMYrf/4/

<div class="dataGrid"> 
    <span>test</span> 
    <a href="#">edit</a> 
</div> 

Et

$('.dataGrid a').click(function(e) { 
     e.preventDefault(); 

     var EditGrid = $(this).parent().children('span'); 
     var DataTxt = EditGrid.text(); 
     var InputHtml = '<input type=text" value="'+DataTxt +'" />'; 

     $(this).text('Save?'); 
     EditGrid.html(InputHtml); 
}); 

Answer 4

<div class="editable">This is the content.</div> 
<script type="text/javascript"> 
    $(function() { 
     $('.editable').each(function() { 
      var a = $('<a href="#">edit</a>'); 
      (function(link, parent) { 
       link.click(function() { 
        link.remove(); 
        var textField = $('<textarea/>').val(parent.html()); 
        parent.replaceWith(textField); 
        delete parent, link; 
       }); 
      })(a, $(this)); 
      $(this).append(" ").append(a); 
     }); 
    }); 
</script> 

Exemple de travail: http://jsfiddle.net/BnH29/