通过点击更改元素，如 PHPMYAdmin

Question

我是 js 的初学者。我想做一个像 PHPAdmin 这样的编辑器。单击其表格时，该字段将变为文本区域。当点击文本区域之外的其他地方时，它将变回原文件并执行sql。

以下是我想用jQuery编写的，我完全不明白我应该如何进一步编码，请指教。

$('#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>

我只有 3 个声望，昨天才加入...很抱歉我不能投票给你，因为它需要 15 个声望。但是，我将非常感谢您的帮助！

Answer 1

如果您想检测元素外部的点击，只需在整个页面上检测它们，并丢弃来自元素内部的任何点击。换句话说：

$('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 
});

但是，听起来您真正要寻找的是“模糊”处理程序，只要有人在文本区域内并离开它，就会触发它；您可以使用与您制作点击处理程序相同的基本方式来制作其中一种：

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