Question

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

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

是否可以这样做？

感谢。

Answer 1

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

供参考，请参阅jQuery Animate文档。

Answer 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');
});

Answer 3

这是一个基于@ wsanville示例的工作示例，其中包含请求的延迟。（注意我还添加了一个效果，在失去焦点时返回它，你可以轻松删除它）

Working Example

**编辑了文本框的大小

Answer 4

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

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

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

他是我的jsFiddle：

https://jsfiddle.net/qo95uquv/

汤姆

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

Answer 6

确定。让我们说你有

<input id="mytextbox" />

你可以做到

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

Onclick展开文本框宽度

6 个答案: