Jquery实时读取文本区域

Jquery get readout of text area live

本文关键字：区域 取文本 读取 实时 Jquery      更新时间：2023-09-26

我想知道我是否可以得到一点帮助。我想实时预览一下它上面的文本区域

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

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

这是我的第一个脚本之一，所以有人能给我一些指导，这应该如何实现?

小提琴

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

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

$('#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>")   
        }
    }
});

希望有所帮助

你可以这样做:

$('#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>');
   }
});

注意:此代码适用于文本区域的change事件，因此您需要在文本区域外单击以触发事件。如果您想在每次按下键时都这样做，则应该将事件从change更改为keyup。然而，这确实会导致性能大大降低。

您可以在这里看到更新后的提琴:http://jsfiddle.net/xv73p/

相关文章：