テキストボックスに打ち込んだ文字をリアルタイムで取得できるjQueryプラグインできました

2013.7.10 jQuery origin_515384657.jpg

こんにちは! 最近、ブログのアクセス解析が気になってしょうがない いわだて (@dutchisover) です!

Origin 515384657

アクセスが多いので需要がある?

当ブログでダントツ一番人気の記事が jQueryを使って テキストボックスに打ち込んだ文字を リアルタイムで取得する方法 という記事でして、一日のアクセスの1/3を叩き出しているうちの稼ぎ頭記事なんです。

書いた当初は備忘録レベルでさらっと書いたモノなんですが、これだけ続けてアクセスがあるということは、テキストボックスからリアルタイムで取得したい人がたくさんいるのかなぁ、と思ってプラグインにしてみました。

どういう動作?をサンプルで説明します。

テキストボックスに入力した文字列を指定した別の要素に反映させます。

このプラグインなら一文字一文字打ち込むたびにプレビューに反映されますので、文字を入力し終わってからボタンを押したりなどの別途操作が不要になります。

ちなみに半角、全角どちらでも対応しています。

サンプル

ここに文字が反映されます。

プラグイン ダウンロード

こちらからjsファイルをダウンロードしてください。

[download id=”928″]

実装方法

jQueryプラグインなので、もちろんjQuery依存です。とくに難しいことはしていないので、バージョンはどれでもOKです。(ver 1.10 では問題なく動作しました。)

まずはhead内にjQueryと当プラグインをあててください。

その後、値を取得したいテキストボックスにプラグインをあてます。

テキストボックスを指定

realPre()というメソッド名を、指定したいテキストボックス要素にチェーンメソッドで繋ぎます。

プレビューを表示させる要素を指定

readPre(第一引数, 第二引数)の第一引数にプレビューを表示させたい要素のid名かclass名を指定します。
もしなにも指定しなければ、【.real】というclassが指定されます。

元のテキストに戻すかどうかを指定

readPre(第一引数, 第二引数)の第二引数に true か false を入れると、テキストボックスが空になったときに もともとのテキストに戻すかどうかを指定できます。

true なら元のテキストに戻す。
false なら元に戻さない。
と指定できます。未入力の場合、trueが自動的に指定されます。

ちなみにこちらが第二引数falseのときの動作になります。

ここに文字が反映されます。

コピペ用のコードです

上記までの実装方法をまとめます。

スクリプト部分はできればHTMLとは別のjsファイルに記述できればしてください。

なにか不具合などあれば @dutchisover までリプライください!

最近の記事

Sponsored