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

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

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

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

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

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

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

サンプル

プラグイン　ダウンロード

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

[download id=”928″]

実装方法

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

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

[html]

[/html]

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

テキストボックスを指定

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

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

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

[javascript]

// 引数を入れない（【.real】というclass名の指定になります）
jQuery(“テキストボックスを指定”).realPre();

// 第一引数を指定（id名かclass名を入れます）
jQuery(“テキストボックスを指定”).realPre(“.hoge”);

[/javascript]

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

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

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

[javascript]

// 第二引数を指定（trueかfalseを入れます。未記入なら自動的にtrue）
jQuery(“テキストボックスを指定”).realPre(“.hoge”, “true”);

[/javascript]

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

コピペ用のコードです

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

[html]

[/html]

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

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