jQueryで文字の入力規制その1

jQueryで文字の入力規制その1

jQueryとescape、正規表現を使った文字の入力規制のサンプルです。IEではime-modeという独自仕様で日本語入力や英数字入力の制御ができますの他のブラウザでは対応していないのjQueryで制御します。
いくつかサンプルを作成したところソースが長くなってしまいましたので2回に分けて紹介&解説したいと思います。




jQueryで文字の入力規制その1
■html
<div id="sample">
<div>
1、全角 <span class="red">半角英数字での入力不可</span><br />
<input type="text" name="zenkaku" />
<span id="alert1"></span>
</div>
<div>
2、半角英数字 <span class="red">全角、記号での入力不可</span><br />
<input type="text" name="hankaku" />
<span id="alert2"></span>
</div>
<div id="submit">入力チェック</div>
</div>
■javascript
$(function() {
	$("#submit").click(function() {
		chk();
	});
});
function chk() {
	var str1 = $("input[name='zenkaku']").val();
	var str2 = $("input[name='hankaku']").val();

	for(i = 0; i < str1.length; i++) {
		var len = escape(str1.charAt(i)).length;
		if(len <= 4) {
			$("#alert1").text("全角で入力して下さい。");
		} else {
			$("#alert1").text('');
		}
	}
	if(str2.match(/[^0-9A-Za-z]+/)) {
		$("#alert2").text("半角英数で入力して下さい。");
	}	else {
		$("#alert2").text('');
	}
}
  • サンプル
  • ダウンロード
  • 解説

    まず最初のクリックイベントは関数「chk()」を実行するだけのスクリプトなので説明は省きます。

    $(function() {
    	$("#submit").click(function() {
    		chk();
    	});
    });
    

    それでは本題の関数「chk()」の中身を解説していきます。
    まず以下の変数「str1」と、「str2」はそれぞれのinputのvalueの値を取得する為の変数です。
    取得のタイミングは先ほどのクリックイベント実行時になります。

    	var str1 = $("input[name='zenkaku']").val();
    	var str2 = $("input[name='hankaku']").val();
    

    続いて半角英数字での入力を不可にする処理です。
    こちらのサイトを参考にさせて頂きました。
    一文字ずつescapeで変換し、変換後の文字の長さで全角かどうかのチェックをします。条件文で変換後文字が4文字未満の場合は半角と判断します。

    	for(i = 0; i < str1.length; i++) {
    		var len = escape(str1.charAt(i)).length;
    		if(len < 4) {
    			$("#alert1").text("全角で入力して下さい。");
    		} else {
    			$("#alert1").text('');
    		}
    	}
    

    最後に全角と記号での入力不可にする処理です。
    正規表現を使い半角数字の0~9とA~Z、a~zのいずれかにマッチするかをチェックします。

    	if(str2.match(/[^0-9A-Za-z]+/)) {
    		$("#alert2").text("半角英数で入力して下さい。");
    	}	else {
    		$("#alert2").text('');
    	}
    

    以上で解説は終わりです。
    今回のサンプルは動作を見て貰うために余計なコードが増えましたが、重要なのは以下の2行だけです。

    function chk() {
    	var str1 = $("input[name='zenkaku']").val();
    	var str2 = $("input[name='hankaku']").val();
    
    	for(i = 0; i < str1.length; i++) {
    		var len = escape(str1.charAt(i)).length;
    		if(len <= 4) {
    			$("#alert1").text("全角で入力して下さい。");
    		} else {
    			$("#alert1").text('');
    		}
    	}
    	if(str2.match(/[^0-9A-Za-z]+/)) {
    		$("#alert2").text("半角英数で入力して下さい。");
    	}	else {
    		$("#alert2").text('');
    	}
    }
    



    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です