使文本输入自动大小为输入

问题描述：

我想有一个文本输入自动调整大小，当用户键入多于一行。使文本输入自动大小为输入

我试过使用html5 contenteditable，但它太复杂，无法获取数据。（此解决方案是不是为我工作Extracting text from a contentEditable div，也有这样的警告“也有可能，如果他们改变他们如何实现CONTENTEDITABLE的更新，任何浏览器可能会打破这种功能。”）

我也尝试this plugin但我不知道如何更新textarea内容。打字后，如果我检查$('textarea').html()我得到空值。

编辑：基本上，对我来说最重要的是如果用户按回车键，换行符会中断。

你想使用textarea还是？ –

@PraveenSingh我不介意。 – user2587454

答

您可以编写自己的插件来自动调整文本区域的大小。试试这个片断：

$(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唯一的解决方案。

autoresize是工作很棒。但我仍然没有得到与val（）的换行符。值是： “1 5” – user2587454

@ user2587454你想换行的Val（）？ –

答

要访问<textarea>的价值，你会希望使用

$('textarea').val()

还应该与你的插件工作。

我得到一个空值 – user2587454

我刚刚检查了插件网站 - 你可以尝试如果$（'textarea'）.value'适合你吗？ –

谢谢。价值为我工作，但我不会换行。如果用户按下'Enter'，我想看到一个换行符而不仅仅是空白。 – user2587454

答

感谢@Praveen辛格，我使用自己的代码来自动调整：

$(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 />')显示换行符。

使文本输入自动大小为输入

相关推荐