あんまり使う機会はないけど、たまーに使うことがあるのでメモ。
今回は、 input_price というクラスのテキスト欄を作り、そこにスクリプトを書きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$('.input_price') .focusout(function(){ var str = $(this).val(); str = str.replace(/,/g,''); if (str.match(/^(|-)[0-9]+$/)) { str = str.replace(/^[0]+([0-9]+)/g, '$1'); str = str.replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,'); } $(this).val(str); }) .focusin(function() { var str = $(this).val(); str = str.replace(/,/g, ''); $(this).val(str); }) .keyup(function(){ var s = new Array(); $.each($(this).val().split(''), function(i, v){ if( v.match(/[0-9]/gi) ) s.push(v); }); if(s.length > 0) $(this).val( s.join('') ); else $(this).val(''); }); |
デモ
ただ、キーアップ時のイベントを入れると、仕組み上
- カーソルキーでカーソルを移動できなくなるため、途中に数字を入力するにはマウスで選択するしか無くなる
- 上記の場合でも2文字以上連続で入力できない（1文字入力した時点で末尾に移動してしまう）
といった問題が発生してしまいます。
なので、場合によっては
- 数字以外の時でも自動的に削除はせずに、エラーの吹き出しを表示する等の方法で警告する
- キーアップ時のイベントを使わないで（入力時点で数字以外が入力されてもとりあえず放っておいて）、その後入力内容の確認画面などでチェックする
- フォーカスが外れたタイミングで一気にチェックする
みたいな別の方法を考えてみたほうがいいのかも…。
参考
jQuery: input[text]で数字のみ入力させるjQueryスクリプト | Web Design Inspiration
コメントする