jQuery UIで普通のテキスト入力を少し立派に見せるjQueryプラグイン

フォームのテキスト入力項目の見た目を、jQuery UI の spinner(スピンボタン付き数値入力ウィジェット)と同じようにする、jQueryの簡単なプラグインです。spinnerのスタイル(CSS)を利用するので、jQuery UI も必要です。

spinnerは結構高さがあって、ボタンウィジェット的な見た目ですが、同じフォームに普通のテキスト入力項目があると、統一感がでません。 上下ガタガタになるから横に並べにくい。ま、高さだけなら個別にスタイルを設定すれば良いのですが、入力フォーカスを得たときの印象も違っていて、なんだかちょっと貧相なんですよね。

ほらこんな感じ↓

数値入力

テキスト入力

「スピナーってそんなにエライのかよ」みたいな気分ですね。「同郷のよしみで仲良くしてたのに、何も隣にたいそう立派なプールと庭付き一戸建てを建てなくてもさ」的惨めな思い。「プールサイドにフェラーリとポルシェがとまってて、椰子なんか生やしちゃってナニヨ」みたいな。

そんな悩みも、以下のスクリプトで解決できる。

the TextBox plugin that utilizes styles jquery-ui.spinner · GitHub

たとえば、こうやれば↓、、、

    $('#foo').uitext();

こんな風になりますよ↓

数値入力

テキスト入力

以下のように、autocompleteに適用しても大丈夫でした。

    $('#bar').autocomplete().uitext();

あーいやしかし、$('input[type=text]').uitext();的に、複数要素まとめて設定するのはアカンような気がする。eachで回せばよいのかな？