当点击改变到文本区域时，当外部点击改变回来 [英] When click change to text-area, When outside click change back

问题描述

我试图制作一个像PHPadmin一样的功能，当它们显示表格时，当点击div字段时，切换到文本区域，当点击div外部时，将其更改回div字段。下面的代码是错误的，当我点击外部时，我不能更改回div域。请帮助我改进代码。

JS：

  $ （'#editor #gird_edit'）。bind（{
 click：function（）{
 $（this）.html（'< textarea id =gird_edit>'+ $（this） .text（）+'< / textarea>'）; 
}，
 blur：function（）{
 $（this）.html（'< div id =gird_edit >'+ $（this）.text（）+'< / div>'）; 
} 
}）; 
  

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> 
  

我只有8个名誉，我不能投票给您。不过，我衷心感谢您的帮助！ see jsfiddle / a>

更新了jsfiddle 当$ $（this）.html（textarea）完成时， div $ c>已经模糊。所以onBlur没有工作



  $（'＃editor #gird_edit'）。bind（{
 click： function（）{
 var tex = $（this）.text（）; 
 var textarea = $（'< textarea id =gird_edit>'+ tex +'< / textarea>' ）; 
 $（this）.html（textarea）; 
 textarea.focus（）; 
 textarea.blur（function（）{
 var currentText = textarea.val（） ; 
 if（currentText == tex）// not change 
 textarea.parent（）。text（tex）; 
 else // changed $ b $ alert（currentText）; 
}）; 
} 
}）; 
  





---

编辑3：

 其他{
 textarea.parent（）。text（currentText）; 
 //其他
} 
  

查找更多 jquery API

I am trying to make a function like PHPadmin what they are using on when showing the table, when click the div filed, change to text-area, and when click outside of the div, change it back to the div filed. The code below is wrong, I cannot change back to the div filed when I click outside. Please help me to improve the code.

JS:

$('#editor #gird_edit').bind({
  click: function() {
            $(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>');
  },
  blur: function() {
            $(this).html('<div id="gird_edit">'+$(this).text()+'</div>');
  }
});

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 8 reputations, I cannot vote you back. However, I sincerely appreciate your helps!

解决方案

see jsfiddle

updated jsfiddle

when $(this).html(textarea) is done, div is already blur. so the onBlur didn't work

$('#editor #gird_edit').bind({
    click: function() {
        var tex = $(this).text();
        var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>');
        $(this).html(textarea);
        textarea.focus();
        textarea.blur(function(){
            var currentText = textarea.val();
            if(currentText == tex)//not change
                textarea.parent().text(tex);
            else //changed
                alert(currentText);
        });
    }
});

---

edit 3:

else{
    textarea.parent().text(currentText);
    //something else
}

find more jquery API

这篇关于当点击改变到文本区域时，当外部点击改变回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！