jquery / javascript将纯文本消息转换为文本输入字段 [英] jquery/javascript convert a plain text message into a text input field

问题描述

我收到以下要求：

创建一个纯文本字段，当点击编辑触发器时，该字段会转换为文本输入元素。当离开输入元素时，文本将被存储在数据库中，并且该字段将被转换回带有新内容的纯文本字段。当在输入中按ESC时，最近的值被恢复。为此，我使用以下代码：

 < div id =value>< span id =text >一些文字< / span>< / div> 
< div id =trigger> < / div> 
< div style =display：none; ID = 存储 > 
< input type =textid =inputvalue =some text/> 
< / div> 
 
< script type =text / javascript> 
 $（'＃trigger'）。click（function（）{
 var t = $（'＃text'）。detach（）; 
 var e = $（'＃input' ）.detach（）; 
 
 $（'＃storage'）。append（t）; 
 $（'＃value'）。append（e）; 
 e。 focus（）; 
}）; 
 $ b $（'＃input'）。blur（function（）{
 var t = $（'＃text'）。detach（）; 
 var e = $（ （）; $ b $ .getJSON（...）; $ b $（$）; 
 
 if（t.text（）！= e.val（））{
）
 
 $（'＃storage'）。append（e）; 
 $（'＃value'）。append（t）; 
}）; 
 $ b $（'＃input'）。keyup（function（event）{
 
 if（event.which == 27）{
 $（'＃input '）.val（$（'＃text'）。text（））; 
 $（'＃input'）[0] .blur（）; 
} 
 
 }）; 
 
< / script> 
  

感谢@nnnnnn现在可以使用。但有没有更简单的方法来实现这一点使用一些预先存在的API函数？

非常感谢。

解决方案

使用jquery编辑这里是一个链接

演示：
http://www.appelsiini.net/projects/jeditable/default.html

插件主页
http://www.appelsiini.net/projects/jeditable

i've got the following request:

create a plain text field that transforms into an text input element when clicking on an edit trigger. When leaving the input element the text will be stored in the database and the field is transformed back into a plain text field with the new content. When ESC is pressed in the input the recent value is restored. To do this i use the following code:

<div id="value"><span id="text">some text</span></div>
<div id="trigger">[EDIT]</div>
<div style="display: none;" id="storage">
  <input type="text" id="input" value="some text"/>
</div>

<script type="text/javascript">
  $('#trigger').click(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    $('#storage').append(t);
    $('#value').append(e);
    e.focus();
  });

  $('#input').blur(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    if (t.text() != e.val()) {
      $.getJSON(...);
    }

    $('#storage').append(e);
    $('#value').append(t);
  });

  $('#input').keyup(function(event) {

    if (event.which == 27) {
      $('#input').val($('#text').text());
      $('#input')[0].blur();
    }

  });

</script>

Thanks to @nnnnnn this now works. But is there maybe a simpler way to implement this using some preexisting API functions?

thanks very much.

解决方案

use jquery editable here is a link

for demo: http://www.appelsiini.net/projects/jeditable/default.html

for plugin home page http://www.appelsiini.net/projects/jeditable

这篇关于jquery / javascript将纯文本消息转换为文本输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！