プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。
ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。
try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>
// プラグインの作成( fn.extend )
$.fn.extend({
numField: function(){
$(this).on('keydown', function(evt) {
// *********************************
// 以下入力を受け付けるキーの処理
// *********************************
// 数字( 0〜9 )
if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
return;
}
// テンキー( 0〜9 )
if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
return;
}
// 矢印
if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
return;
}
// DEL
if ( evt.keyCode == 46 ) {
return;
}
// タブ
if ( evt.keyCode == 9 ) {
return;
}
// バックスペース
if ( evt.keyCode == 8 ) {
return;
}
// *********************************
// 以下入力を受け付けないキーの処理
// *********************************
// 古い IE 用
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
try{
evt.returnValue = false;
}catch(ex){}
}
try{
// イベントがキャンセル可能である場合、
// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
// そのイベントをキャンセルします。
evt.preventDefault();
}catch(ex){}
});
// プラグインの標準仕様として実行後は自分自身を返す
return this;
}
});
// プラグインの実行
$(".numField").numField()
.css({
"background-color":"pink",
"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 のプラグインとしてストリートビューを利用する
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
