JQuery считывает текстовую область в прямом эфире

Question

Мне было интересно, смогу ли я немного помочь. Я хочу получить предварительный просмотр того, что находится в моей текстовой области над ним.

Каждая новая строка в текстовой области будет отображаться в виде списка над ним, так что-то вроде этого:

• тест
• 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 
     } 
}); 

Это один из первых моих скриптов, так может кто-то пожалуйста, дайте мне некоторые рекомендации о том, как это должно быть достигнуто?

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

Answer 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>") 
     } 
    } 
}); 

Надеется, что это помогает

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

Примечания: этот код работает на change случае текстового поля, таким образом, что вам нужно щелкнуть снаружи текстового поля для запуска события. Если вы хотите сделать это при каждом нажатии клавиши, вы должны изменить событие от change до keyup. Однако это приводит к гораздо меньшей производительности.

Вы можете увидеть обновленную скрипку здесь: http://jsfiddle.net/xv73p/