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

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