Onclick展开文本框宽度

Question

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

例如,如果输入的默认宽度为100px,当用户单击它进行键入时,它将扩展为宽度为150px.

是否有可能做到这一点？

谢谢.

Answer 1

这是关于动画的jsfiddle 的更新示例,并返回到模糊时的默认大小.

有关参考,请参阅jQuery Animate文档.

Answer 2

我想通过删除保存原始大小的额外步骤来构建@ wsanville的示例.动画还采用字符串值,如'+ = 50'或' - = 50'来增加/减小宽度.

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

Answer 3

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

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

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

这是我的 jsFiddle：

汤姆