сделать ввод текста autoresize как ввод

Question

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

Я пробовал использовать html5 contenteditable, но это слишком сложно, чтобы получить данные. (это решение не работает для меня Extracting text from a contentEditable div, а также есть это предупреждение «Возможно также, что обновление для любого браузера может сломать эту функцию, если они изменят способ реализации ContentEditable.»)

Я также пробовал this plugin, но Я не знаю, как обновить содержимое textarea. после ввода, если я проверяю $('textarea').html(), я получаю пустое значение.

Редактировать: в основном, самое важное для меня - это получить разрыв строки, если пользователь нажимает клавишу ввода.

Answer 1

Вы можете написать свой собственный плагин для автоматической обработки текстовой области. Попробуйте этот фрагмент:

$(document).ready(function() { 
 
\t $('.txt').on('keyup', function(event) { 
 
\t  var textareaElm = event.target; 
 
     if (textareaElm.scrollHeight > textareaElm.clientHeight) { 
 
      textareaElm.style.height = textareaElm.scrollHeight + "px"; 
 
     } 
 
\t }); 
 
})

.txt { 
 
\t width: 200px; 
 
\t height: 50px; 
 
\t transition: height 0.2s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<textarea class="txt"></textarea>

Вот jsfiddle за то же самое: http://jsfiddle.net/t1cg7f20/

Этот пример использует JQuery. Дайте мне знать, если вам нужно только решение JS.

Answer 2

Чтобы получить доступ к <textarea> сек значение, которое вы хотите использовать

$('textarea').val() 

Он должен также работать с плагином.

Answer 3

Благодаря @Praveen Сингх, я использую его код AUTORESIZE:

$(document).ready(function() { 
$('.txt').on('keyup', function(event) { 
    var textareaElm = event.target; 
    if (textareaElm.scrollHeight > textareaElm.clientHeight) { 
     textareaElm.style.height = textareaElm.scrollHeight + "px"; 
    } 
}); 

})

.txt { 
width: 200px; 
height: 50px; 
transition: height 0.2s linear; 

}

и replace(/\n\r?/g, '<br />'), чтобы показать разрыв строки.