如何在點擊時擴展文本框的大小？

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