通过点击PHPAdmin来改变元素

Change element by click like PHPAdmin

本文关键字:改变 元素 PHPAdmin      更新时间:2023-09-26

我是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个声誉。但是,我会非常感谢你的帮助!!

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

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