Onclick 展开文本框宽度答案

【问题标题】：Onclick Expand Textbox WidthOnclick 展开文本框宽度
【发布时间】：2021-08-18 19:18:15
【问题描述】：

我想在 onclick 期间使用 jQuery 扩展输入文本框的宽度。

例如，如果输入的默认宽度为 100px，当用户点击输入时，它会扩展为 150px 的宽度。

可以这样做吗？

谢谢。

【问题讨论】：

标签： jquery html

【解决方案1】：

这是 jsfiddle 上的 updated example 动画，并在模糊时返回默认大小。

有关参考，请参阅jQuery Animate docs。

【讨论】：

太棒了。我对 jQuery 不擅长，那么如何使它不再集中在它的默认宽度上呢？另外，除了突然的宽度变化之外，是否可以进行平滑的滑出？
更新了动画和模糊处理程序。

【解决方案2】：

我想以@wsanville 的示例为基础，删除保存原始大小的额外步骤。动画还采用字符串值，如 '+=50' 或 '-=50' 来增加/减少宽度。

See in in action on jsfiddle

$('#box').focus(function()
{
    $(this).animate({ width: '+=50' }, 'slow');
}).blur(function()
{
    $(this).animate({ width: '-=50' }, 'slow');
});

【讨论】：

【解决方案3】：

我知道这有点晚了，但如果有人想要一个使用 :focus 属性的纯 CSS 解决方案。

#textbox {
  width:100px;
  transition: 0.5s;
}

#textbox:focus {
  width:150px;
  transition: 0.5s;
}

这是我的 jsFiddle：

https://jsfiddle.net/qo95uquv/

汤姆

【讨论】：

【解决方案4】：

这是一个基于@wsanville 示例的工作示例，请求延迟。（注意我还添加了一个在失去焦点时返回它的效果，你可以很容易地移除它）

Working Example

**编辑文本框的大小

【讨论】：

【解决方案5】：

<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>

【讨论】：

【解决方案6】：

当然。假设你有

<input id="mytextbox" />

你可以的

$("#mytextbox").focus(function(){
   $(this).width(150)
});

【讨论】：