javascript - jQuery实时获取文本区域的读数

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

文本区域中的每一行将显示为上方的列表，因此如下所示：


测试
测试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
      }
});

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

最佳答案

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

关于javascript - jQuery实时获取文本区域的读数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17188902/