Google ChromeやFirefoxには標準で<textarea>の自由リサイズ機能(マウスでのリサイズ機能)がありますが、input type="text"等のテキストボックスにはその機能がありません。
jQueryで実装してみました。
以下のCSSとJavaScriptを導入してください。あとは自動的に機能が導入されます。
- jQueryを先にロードしてください。必要バージョンは分かりません(苦笑)
- Google ChromeとFirefoxで動作確認しています。
- CSSの width が掴める部分のサイズになります。
- CSSの z-index の下3桁(1000で割った余り)がテキストボックスの最小サイズになります。
- CSSの display:none を有効にするとフォームリサイズ機能を無効にできます。
- テキストボックスの初期サイズの方が小さい場合はそちらが最小サイズになります。
- IE6,7で動作しましたが、IE8,9では動作しませんでした(動作しないだけで不具合はありません)。
- 手前にあるspanよりも裏側にあるテキストボックスが優先される謎の仕様のせいです。
続きを読む