jQuery Onclick 展开文本框宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6379745/
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
Onclick Expand Textbox Width
提问by Spencer
I want to use jQuery to expand the width of a input textbox during onclick.
我想在 onclick 期间使用 jQuery 扩展输入文本框的宽度。
For example, if the input has a default width of 100px, when the user clicks in it to type, it will expand to like 150px in width.
例如，如果输入的默认宽度为 100 像素，当用户点击输入时，它会扩展到 150 像素的宽度。
Is it possible to do this?
是否有可能做到这一点？
Thanks.
谢谢。
回答by wsanville
Here's an updated exampleon jsfiddle that animates, and returns to the default size on blur.
这是jsfiddle 上的一个更新示例，它可以设置动画并在模糊时返回默认大小。
For reference, see jQuery Animatedocs.
作为参考，请参阅jQuery Animate文档。
回答by manu3569
I'd like to build on @wsanville's example by removing the extra step on saving the original size. Animation also takes string values like '+=50' or '-=50' for increasing/decreasing the width.
我想通过删除保存原始大小的额外步骤来构建@wsanville 的示例。动画还采用诸如 '+=50' 或 '-=50' 之类的字符串值来增加/减少宽度。
$('#box').focus(function()
{
$(this).animate({ width: '+=50' }, 'slow');
}).blur(function()
{
$(this).animate({ width: '-=50' }, 'slow');
});
回答by Tom
I know this is a bit late to the party, but if anyone wants a pure CSS solution that uses the :focus attribute.
我知道这对派对来说有点晚了，但是如果有人想要一个使用 :focus 属性的纯 CSS 解决方案。
#textbox {
width:100px;
transition: 0.5s;
}
#textbox:focus {
width:150px;
transition: 0.5s;
}
He's my jsFiddle:
他是我的 jsFiddle：
https://jsfiddle.net/qo95uquv/
https://jsfiddle.net/qo95uquv/
Tom
汤姆
回答by RandomWebGuy
Here a working example based on @wsanville's example with the requested delay. (Note I also added an effect to return it on loss of focus, you can remove that easily)
这是一个基于@wsanville 示例的工作示例，具有请求的延迟。（请注意，我还添加了一个效果以在失去焦点时返回它，您可以轻松删除它）
**edited the size of the textbox
**编辑文本框的大小
回答by Null Head
<input type="text" id="tbText" size="30px"/>
<script type="text/javascript">
$(document).ready(function() {
$('#tbText').focus(function() {
$('#tbText').css("width", "250px");
});
$('#tbText').blur(function() {
$('#tbText').css("width", "150px");
});
});
</script>
回答by Amin Eshaq
sure. Lets say you have
当然。让我们说你有
<input id="mytextbox" />
you can do
你可以做
$("#mytextbox").focus(function(){
$(this).width(150)
});
