クリックするとテキストボックスのサイズを拡張する方法は？

Question

私は現在、検索機能を利用しているサイトで作業しています。上の隅にテキストボックスがあり、ユーザーがボックスをクリックするたびに現在の長さの2倍になるように設定したいと思っています。どのように私はそれを正確に行うだろうか？私は検索しましたが、役に立つ情報は見つかりませんでした。

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