プラグインのサンプルとして、keydown イベントのみを使って作成した以下のプラグインと基本的に行っている事は変わりません。 jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド ) ▲ と同様実用になるものではありませんが、簡易的な入力制限であれば今回の方法は効果的です。 keydown イベント このイベントの主体はキーボードに並んでいるキーなので、ほぼ全てのキーが網羅されています。しかし、テンキーと本体での数字キーは別の個体なので、違ったキーが割リ当てられます。また、キー操作を伴うキーを判別できるので、厳密なコントロールができる反面、制御するコード量が多くなるわりに、日本語等を完全にコントロールできないのでメリットがあまりないかもしれません。 keypress イベント このイベントの主体は、アプリケーションに送られる文字コードが主体です。この場合テンキーから送られる『1』と本体から送られる『1』は同じ『1』を表す数値なので、管理が容易です。しかし、日本語を入力する為に『漢字』キーを少しでもコントロールしようとすると、keydown イベントが必要になるので付加しています。 ですが、結局完全にコントロールはできずに、現実にはブラウザによって挙動が違います。 this について allowField 内の this は、jQuery のオブジェクトですが、イベント内の this は DOM なので、常に jQuery の処理として見通しを良くする為に、いずれにも $(this) という表現を行っています。 入力可能文字について この文字集合は、入力フィールド毎に設定されるものなので、attr で要素の属性としてプラグイン作成時に設定し、イベント発生時には DOM より jQuery オブジェクトを作成して attr で取得して対象文字かどうかを判断するようにしています。
<input class="numField" type="text" />
<input class="numField" type="text" />
<input class="numField" type="text" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$.fn.extend({
allowField: function(str){
// 対象文字集合を登録しておく
$(this).attr("allowstr",str);
$(this).bind('keypress', function(evt) {
// なんらかの文字が割り当てられたキーを押した
if ( evt.charCode != 0 ) {
// 保存しておいた、対象文字集合を取り出す
var allowstr = $(this).attr("allowstr");
// 押された文字コードから実際の文字を作成する
var nowstr = String.fromCharCode( evt.charCode );
// その文字が対象文字集合に含まれていたら、関数を抜ける
if ( allowstr.indexOf(nowstr) >= 0 ) {
return;
}
// 対象文字集合に含まれない場合は、デフォルトの処理をキャンセル
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
try{evt.returnValue = false;}catch(ex){}
}
try{evt.preventDefault();}catch(ex){}
}
}).bind('keydown', function(evt) {
// 漢字
// IE9 と Chrome と Safari は拒否できるが、Chrome は漢字モードにはなってしまうので
// 漢字モードを抜けないと何も入力できなくなる
if ( evt.keyCode == 229 ) {
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
try{evt.returnValue = false;}catch(ex){}
}
try{evt.preventDefault();}catch(ex){}
}
});
return this;
}
});
// プラグインの実行
$(".numField").allowField("1234567890ABCDEFabcdef-")
.css("background-color", "#e0e0ff")
.css("width","70px")
.attr("maxlength",6);
</script>
タグ：jquery javascript
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
