1

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

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

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

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

4

3 回答 3

2

小提琴

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

于 2013-06-19T10:39:23.133 回答
2

这是你想要的？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>")   
        }
    }
});

希望能帮助到你

于 2013-06-19T10:34:39.563 回答
1

你可以这样做：

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

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

你可以在这里看到更新的小提琴：http: //jsfiddle.net/xv73p/

于 2013-06-19T10:36:50.357 回答