実用的と言っても以下の二つに比べての話で、見た目はいったん入力したものがフォーカス移動時に元にもどったり、キーで入力したものがいったん表示されて消えるといった見た目はあまり良いものではありません。 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
インストールするとすぐ利用可能になるので、以下のスクリプトを利用可能です。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
