Question

I am beginner of js. I want to make a editor like PHPAdmin. When click its table, the field will change to text-area. When click some where else outside of the text-area, it will change back to the filed and execute the sql.

Following is what I suppose to write with jQuery, I am totally not understand how should I code it further, please advice.

$('#editor #gird_edit').bind({
  click: function() { //When Click
      var content = $(this).text(); // read what is in the filed
      $("#gird_edit").text('<textarea>'+a+'</textarea>'); // This is not work, will only add html code,not change to text-area
  },
  /* ??? */: function() { //Outside click of the text-area 
      var content = $(this).text(); // read what is in the text-area
      $("#gird_edit").text(????);  // change back to the filed 
  }
})

Html

<div id='editor'>
   <div id='gird_edit'>hallo world</div>
   <div id='gird_edit'>hallo world 2</div>
   <div id='gird_edit'>hallo world 3</div>
</div>

I only have 3 reputations, just joined yesterday…I am sorry for that I cannot vote you since it requires 15 reputations. However, I will very appreciate you help!!

Answer 1

If you want to detect clicks outside of an element, just detect them on the whole page, and throw out any that come from inside the element. In other words:

$('body').on('click', : function(e) { //Outside click of the text-area 
    if ($(this).parents().is('#gird_edit')) return false;
    var content = $('textarea').text(); // read what is in the text-area
    $("#gird_edit").text(????);  // change back to the filed 
});

However, it sounds like what you’re really looking for is a “blur” handler, which will trigger whenever someone was inside a textarea and just left it; you can make one of those the same basic way you made your click handler:

$('#gird_edit textarea').bind({
    blur: function() {
        // do the reverse of the click handler
}