実用的と言っても以下の二つに比べての話で、見た目はいったん入力したものがフォーカス移動時に元にもどったり、キーで入力したものがいったん表示されて消えるといった見た目はあまり良いものではありません。 jQuery で、指定文字集合のみ入力可能なプラグイン jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド ) しかし、JavaScript ではここらへんが限界のような気もします。いずれにしても、『処理』として参考にするようなコードである事は間違い無いと思います。 要点 ここで最も重要なのは、『いつ入力前のデータを保存するか』です。ここでは、onfocus と、onkeydown と、onkeyup の３か所で保存しています。但し、それぞれ意味が違います。 ❶ onfocus では、最初からフィールドに入っていたものを取得するのが目的で、フォーカスが移動すれば、再度フォーカスを得る直前にまた保存されます。 ❷ onkeydown では、何かキーを押す直前の保存なので、一文字づつのチェックの為に使います。しかし、クリップボートから転送される場合には、ここは意味が無いので onfocus で取得済の文字列を使います ❸ onkeyup では、実際の入力文字が該当しない場合に拒否して、❷ で保存したものに戻しますが、うまく行った場合は、保存します。こうする事で、フォーカス移動の無い状態で入力の途中でクリップボードの貼り付けが使用された場合に、戻す文字列量を最小限にします。 データの保存 保存データは、.data を使って、jQuery 内部に保存します。attr を使うと、INPUT 要素に保存できるので、開発者ツールでデバッグがしやすくなるメリットはありますが、.data を使うと、オブジェクトとして保存できるので、拡張が容易になります。
<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).data( "allowstr", str );
$(this).bind('keyup', function() {
var allowstr = $(this).data( "allowstr" );
var cur = $(this).data( "cur" );
var change = $(this).val();
var char = null;
for( var i = 0; i < change.length; i++ ) {
char = change.substr( i, 1 );
if ( allowstr.indexOf(char) == -1 ) {
$(this).val(cur);
return;
}
}
$(this).data( "focus", $(this).val() );
}).bind('change', function() {
// ここの処理は、フォーカスがなくなった時にその中に1文字でも対象外
// の文字が含まれていたら、直前の保存の状態に戻すので、極端な場合は
// 全く空白になる事があり得ますので注意が必要です
var allowstr = $(this).data( "allowstr" );
var focus = $(this).data( "focus" );
var change = $(this).val();
var char = null;
for( var i = 0; i < change.length; i++ ) {
char = change.substr( i, 1 );
if ( allowstr.indexOf(char) == -1 ) {
$(this).val(focus);
return;
}
}
}).bind('keydown', function() {
// 現在のデータを保存
$(this).data( "cur", $(this).val() );
}).bind('focus', function() {
// 現在のデータを保存
$(this).data( "focus", $(this).val() );
});
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 の仕様について )
