javascript - Jquery实时读取文本区域

Question

我想知道我是否可以得到一点帮助。我想实时预览其上方文本区域中的内容。

文本区域中的每一行都会在其上方显示为一个列表，如下所示:

• 测试
• 测试2
• 测试3

文本区域:

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

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() .