• かちびと.net

    input要素に長いテキストが入力された際、カーソルの位置を可視化するjQueryプラグイン・Smart Input Field Position Indicatorのご紹介です。いいユーザビリティになりそう。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

Smart Input Field Position Indicator


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

Sample


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

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

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

詳細は以下でどうぞ。

Smart Input Field Position Indicator

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services