Question

我正在尝试添加一个逻辑，允许您通过双击来编辑文本。我想点击Enter在文本中添加<br/>标记，但在焦点偏移后隐藏<br>标记并在没有任何
的行下显示文本行。这是我的代码：

var oriVal;
$("#parentUL").on('dblclick', 'li', function () {
    oriVal = $(this).text();
    $(this).text("");
    $("<textarea wrap='off' rows='1'></textarea>").appendTo(this).val(oriVal).focus();
});
$("#parentUL").on('focusout', 'li > textarea', function () {
    var $this = $(this);
    $this.parent().text($this.val().replace(/\n/g, '<br/>') || oriVal);
    $this.remove(); // Don't just hide, remove the element.
});

http://jsfiddle.net/wabLp/428/

Answer 1

在列表项上使用CSS white-space属性。

＆＃13;

$(function() {
  var oriVal;
  $("#parentUL").on('dblclick', 'li', function() {
    oriVal = $(this).text();
    $(this).text("");
    $("<textarea wrap='off' rows='1'></textarea>").appendTo(this).val(oriVal).focus();
  });
  $("#parentUL").on('focusout', 'li > textarea', function() {
    var $this = $(this);
    // good idea to trim
    var newVal = $.trim($this.val());
    $this.parent().text(newVal || oriVal);
    $this.remove(); // Don't just hide, remove the element.
  });

});

＆＃13;

/* you want to maintain the whitespace characters */
li {
  white-space: pre-wrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='parentUL'>
  <li>dad</li>
  <li>ads</li>
</ul>

＆＃13;

如果您选择使用<br />方法，那么您必须使用.html()代替.text()。

使用jQuery双击后附加textarea

1 个答案: