javascript 动态增加文本框高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4422043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically increasing textbox height?
提问by WeaponsTheyFear
Possible Duplicate:
Autosizing Textarea
可能的重复：自动
调整文本区域
Hello all, I am trying to solve a problem and getting absolutely no where with it. What I am trying to do is dynamically change the height of an inputbox when the users text overflows it's width (sorta like Facebook's status update textbox).
大家好，我正在尝试解决一个问题，但绝对无处可去。我想要做的是在用户文本溢出其宽度时动态更改输入框的高度（有点像 Facebook 的状态更新文本框）。
You enter a brief update, and if the text is longer than the textbox, it creates a new row. I tried using a textarea, but for whatever reason cannot force it to be exactly 1 row by default.
您输入一个简短的更新，如果文本比文本框长，它会创建一个新行。我尝试使用 textarea，但无论出于何种原因，默认情况下都不能强制它恰好为 1 行。
Anyone know an easy way of doing this? :(
有人知道这样做的简单方法吗？:(
回答by v64
You can manually control the size of the textareausing the CSS height and width parameters. By binding a keypress event to the textarea, you can get the amount of text in the box and adjust the height accordingly. For example, here's some jQuery that will add 20 pixels to the height of the box for every 50 characters you put in:
您可以textarea使用 CSS 高度和宽度参数手动控制 的大小。通过将按键事件绑定到textarea，您可以获得框中文本的数量并相应地调整高度。例如，这里有一些 jQuery，每输入 50 个字符，框的高度就会增加 20 个像素：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<textarea id="textbox" style="height:20px;width:400px;"></textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").val('');
$("#textbox").keypress(function() {
var textLength = $("#textbox").val().length;
if (textLength % 50 == 0) {
var height = textLength/50;
$("#textbox").css('height', 20+(height*20));
}
});
});
</script>
You can tweak the values to get the desired effect.
您可以调整这些值以获得所需的效果。
回答by Bojangles
To get the textareato stretch, give this a go (jQuery): http://www.unwrongest.com/projects/elastic/.
要textarea拉伸，请试一试（jQuery）：http: //www.unwrongest.com/projects/elastic/。
As for the height of exactly one row, you could try rows="1"in the <textarea>tag, as well as removing CSS styling. Some browsers, however, may set a textarea's minimum height to more than one row.
至于恰好一行的高度，您可以尝试rows="1"在<textarea>标签中，以及删除CSS样式。但是，某些浏览器可能会将 textarea 的最小高度设置为多于一行。
Another solution would be to use a divon screen that, when the user clicks on it, makes the browser focus on a hidden textbox. The user types into the hidden text box, and the divis given the textbox's contents via. JavaScript. The tricky bit then is getting the flashing cursor, but you could use the pipe |character in the div and make it flash, although this starts getting long winded about the time you start it. I'd try with the textarea again personally :-)
另一种解决方案是使用div屏幕上的 ，当用户单击它时，使浏览器专注于隐藏的文本框。用户在隐藏的文本框中键入内容，并通过div它获得文本框的内容。JavaScript。棘手的一点是获取闪烁的光标，但您可以|在 div 中使用管道字符并使其闪烁，尽管这在您启动它的时间开始变得冗长。我会亲自再次尝试使用 textarea :-)
Hope this helps,
希望这可以帮助，
James
詹姆士
