Question

当用户键入多行时，我想要一个带自动调整大小的文本输入。

我尝试使用html5 <script type="text/javascript"> function item() { cake = Number(document.getElementById('cake').value); twizlers = Number(document.getElementById('twizlers').value); taffy = Number(document.getElementById('taffy').value); if (cake == twizlers) { alert("Some alert cake or twizlers"); return false; } else if (twizlers == taffy) { alert("Some alert taffy or twizlers"); return false; } else if (taffy == cake) { alert("Some alert taffy or cake"); return false; } else { return true; } } </script>，但获取数据太复杂了。（这个解决方案对我来说不起作用Extracting text from a contentEditable div并且还有这个警告“如果任何浏览器的更新如果他们改变了实现contentEditable的方式，那么它也可能会破坏这个功能。”）

我也试过this plugin，但我不知道如何更新textarea内容。打字后如果我正在检查contenteditable我的空值。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

这是一个相同的jsfiddle：http://jsfiddle.net/t1cg7f20/

此示例使用jQuery。如果您需要仅限JS的解决方案，请告诉我。

Answer 2

要访问<textarea>的值，您需要使用

$('textarea').val()

它也适用于您的插件。

Answer 3

感谢@Praveen Singh，我正在使用他的代码进行自动调整：

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

将文本输入自动调整为输入

3 个答案: