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

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

希望能幫助到你

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

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/