input要素に長いテキストが入力された際、カーソルの位置を可視化するjQueryプラグイン

Ads

なかなか良さそうだったので備忘録。
input要素に入力したテキストが長く
なると、位置の把握やテキストの量
が把握できません。これが地味にス
トレスな事もあります。これを解決
する、というスクリプトです。

input要素に長いテキストが入力されてる際に、カーソル位置をバーで明示し、大まかな長さも可視化します。

Smart Input Field Position Indicator


説明が下手で伝わってない気がするので以下のサンプルをご確認下さい。

Sample


value属性に書いてますが、入力したテキストでもバーは表示されます。デモのアニメーションやバーの色はCSSで施行しています。余分なDOM要素を追加する必要が無いのはいいですね。

$('.foo').inputIndicator({bgPos:'31px'});​

本体とプラグインを読み込んで初期化します。あとはbgPosというオプションでバーの位置を指定すればOK。

詳細は以下でどうぞ。

Smart Input Field Position Indicator