Question

我想知道我是否能得到一些帮助。我想要预览我上面文本区域的内容。

文本区域中的每个新行都将显示为其上方的列表，如下所示：

测试
test2
TEST3

文字区域：

test
test2
test3

我希望它如何工作是在加载时它读取文本区域的内容并在列表中显示上面的内容。然后，当文本区域的内容发生更改时，它也会更改其上方的列表。

这是我的代码：http://jsfiddle.net/spadez/9sX6X/

<h4>Placeholder</h4>
<ul id="tst"></ul>
<textarea rows="4" cols="50" placeholder="Test" id="test"></textarea>

这是我走了多远：

$('#test').bind('input propertychange', function() {
      if(this.value.length){
Rerender list to show contents
      }
});

这是我的第一个脚本之一，所以有人可以就如何实现这一点给我一些指导吗？

Answer 1

这是你要找的？ http://jsfiddle.net/9sX6X/2/

<强> CODE

$('#test').bind('keyup', function () {
    if (this.value.length) {
        var inp = this.value.split("\n");
        $("#list").empty();
        for(var x = 0; x < inp.length; x++){
            $("#list").append("<li>"+inp[x]+"</li>")   
        }
    }
});

希望有所帮助

Answer 2

Fiddle

var list = $('#tst');

$('#test').on('keyup', function() {
      list.empty();
      if(this.value.length){
          $.each(this.value.split("\n"), function(i, val){
              list.append($('<li></li>').text(val));
          });
      }
});

$('#test').trigger('keyup'); // required to make it do the update onload

由于我使用.text()，因此会处理<和>等特殊字符而不会出现问题。另请注意我一次只选择<ul>，而不是一遍又一遍地重新选择。

旁注：从jQuery 1.7开始，.on()是首选，而不是.bind()。

Answer 3

你可以这样做：

$('#test').on('change', function () {
   var lines = $(this).val().split('\n');

   $('#tst').empty(); 

   for (var i = 0;i < lines.length;i++){
     $('#tst').append('<li>' +  lines[i] + '</li>');
   }
});

注意：此代码适用于textarea的change事件，因此您需要在textarea外部单击以触发事件。如果您想在每次按键时执行此操作，则应将事件从change更改为keyup。但是，这确实导致了更低的性能。

您可以在此处查看更新的小提琴：http://jsfiddle.net/xv73p/

Jquery实时读取文本区域

3 个答案: