Javascript 单击时如何扩展文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5648464/
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
how to expand a text area when click on
提问by Uchenna
Im working on a small project which has a textarea and i need help in making the text area expand on mouse click like that of twitter and facebook. the textarea should look like a textfield at first then when clicked on should expand.
我正在做一个有 textarea 的小项目，我需要帮助使文本区域在鼠标点击时扩展，就像 twitter 和 facebook 那样。textarea 起初应该看起来像一个文本字段，然后当点击时应该展开。
回答by Ben Fortune
This can be done without the use of JavaScript/jQuery, using CSS transitions.
这可以在不使用 JavaScript/jQuery 的情况下完成，使用 CSS转换。
textarea {
height: 1em;
width: 50%;
padding: 3px;
transition: all 0.5s ease;
}
textarea:focus {
height: 4em;
}<textarea rows="1" cols="10"></textarea>回答by wdm
Something like this would work...
像这样的东西会起作用......
Demo: http://jsfiddle.net/Y3rMM/
演示：http: //jsfiddle.net/Y3rMM/
CSS...
CSS...
.expand {
height: 1em;
width: 50%;
padding: 3px;
}
HTML...
HTML...
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery...
jQuery...
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
回答by Ben
This will work for you:
这对你有用：
<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>
I used onfocusinstead of onclickbecause onclickisn't fired if the user uses the tab key to move to the textarea. You'll also want to make sure the user can't resize it themselves - hence the style attribute.
我使用了onfocus而不是onclick因为onclick如果用户使用 tab 键移动到 textarea 则不会被触发。您还需要确保用户无法自行调整其大小——因此是 style 属性。
You could also add onblur="this.rows=1;"to shrink it back down once the user moves out of your textarea.
onblur="this.rows=1;"一旦用户移出您的文本区域，您还可以添加以将其缩小。
回答by mirchu
$("textarea").focus(function(){
$("textarea").animate({ height: "70px" }, 500);
});
default css
默认 CSS
textarea{ height: 50px;}
on focus textarea height will increase :) simple jquery
焦点 textarea 高度会增加:) 简单的 jquery
回答by Leopoldo Sanczyk
Based in doog abides commentusing jQuery, I enhanced the code to autoadjust approximately the number of rows acording to the length of the content, and return to 1 when focus is lost.
基于doog遵循使用jQuery的注释，我增强了代码以根据内容的长度自动调整大约行数，并在失去焦点时返回1。
HTML:
HTML：
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery:
jQuery：
$('textarea.expand').focus(function () {
$(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
$(this).animate({rows: 1}, 500);
//Resize back to one row if the textarea is manually resized via the handle
$(this).css({height: ''});
$(this).css({width: ''});
});
回答by neebz
use this plugin > http://plugins.jquery.com/project/elastic
使用这个插件> http://plugins.jquery.com/project/elastic
very simple and effective !
非常简单有效！
回答by ariel
You can do this with CSS only using position: absolute, which will make it float over other elements, and the :focusselector, which will be applied only when the element have the focus. First you need to reserve the textarea size enclosing it in an element:
您只能使用 CSS 来做到这一点position: absolute，这将使它浮动在其他元素上，而:focus选择器仅在元素具有焦点时应用。首先，您需要保留将其包含在元素中的 textarea 大小：
<div class="textarea"><textarea></textarea></div>
div.textarea {
height: 50px;
width: 400px;
}
Then style the unfocused textarea
然后设置未聚焦的文本区域的样式
textarea {
position: absolute;
height: 50px;
width: 400px;
transition: all 200ms;
}
And finally the focused one
最后是专注的
textarea:focus {
z-index: 1001;
min-height:250px;
}
Fiddle: http://jsfiddle.net/7v60su9e/
回答by Thor Jacobsen
<textarea style="width:200px; height:50px;" id="ta"></textarea>
var ta = document.getElementById('ta');
ta.onclick = function(){
this.style.height = "400px";
}
A quick fiddle: http://jsfiddle.net/n6sgT/
一个快速的小提琴：http: //jsfiddle.net/n6sgT/
回答by Remy
You can do something like below:
您可以执行以下操作：
<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >
