jquery/javascript将纯文本消息转换为文本输入字段

jquery/javascript convert a plain text message into a text input field

本文关键字:文本 转换 输入 字段 消息 jquery javascript      更新时间:2023-09-26

我收到以下请求:

创建一个纯文本字段,该字段在单击编辑触发器时转换为文本输入元素。离开输入元素时,文本将存储在数据库中,字段将转换回包含新内容的纯文本字段。当在输入中按下ESC时,将恢复最近的值。要做到这一点,我使用以下代码:

<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>

多亏了@nnnnnn,现在可以工作了。但是,有没有一种更简单的方法可以使用一些预先存在的API函数来实现这一点?

非常感谢。

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

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

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

我开发了一个插件,可以满足您的需求:

$convert-to-

我希望这会有所帮助,亲爱的。