单击时如何扩展文本框的大小？

Question

我目前正在使用搜索功能的网站上工作。我在顶角有一个文本框，我想设置它，以便每当用户点击框时，它会延伸到当前长度的两倍。我到底该怎么做？我搜索过但找不到任何有用的信息。

Answer 1

为什么不使用CSS3过渡？你可以做这样的事情来增加文本框的宽度：

input, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  

input:focus, textarea:focus {  
    width: 340px;  
}