Javascript jQueryで半角・数字・かな入力チェックと数値入力制限する方法

入力された後、チェックロジックを実行して、正しい入力がされているかを判断する場合に利用します。ここでは、「半角英数字」「半角数字」「ひらがな・カタカナ」のチェックを紹介します。

入力チェックには正規表現を利用します。「半角英数字」「半角数字」の場合、あらかじめ「style="ime-mode: disabled"」を入れておくことをおすすめします。

/**
 * 半角英数字かチェック
 * @return true:半角英数字である(もしくは対象文字列がない), false:半角英数字でない
 */
function isHalfWidthAlphanumeric(value) {
  if ( value == null )
    return;
  if( value.match( /[^A-Za-z0-9s.-]+/ ) ) {
    alert("半角英文字で入力してください");
    return false;
   }
   return true;
}
/**
 * 半角数字かチェック
 * @return true:半角数字である(もしくは対象文字列がない), false:半角数字でない
 */
function isNumeric(value) {
  if ( value == null )
    return;
  if( value.match( /[^0-9.,-]+/ ) ) {
    alert("半角数字で入力して下さい。");
    return false;
  }
  return true;
}
/**
 * ひらがな・カタカナかチェック
 * @return true:ひらがな・カタカナである(もしくは対象文字列がない), false:ひらがな・カタカナでない
 */
function isKana(value) {
  if ( value == null )
    return;
  if( value.match( /[^ぁ-んァ-ン　s]+/ ) ) {
    alert("ひらがなもしくはカタカナで入力して下さい。");
    return false;
  }
  return true;
}

呼び出し元は jQuery で書いておきましょう。ここでは jQuery 3.3.1 を利用します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function(){$("#text1").blur(function(){ if ( !isHalfWidthAlphanumeric($(this).val()) ) { $(this).focus(); } });});
$(function(){$("#text2").blur(function(){ if ( !isNumeric($(this).val()) ) { $(this).focus(); } });});
$(function(){$("#text3").blur(function(){ if ( !isKana($(this).val()) ) { $(this).focus(); } });});

htmlはこんな感じです。

<input type="text" id="text1" size="20" />：半角英数字で入力してください。
<input type="text" id="text2" size="20" />：半角数字で入力してください。
<input type="text" id="text3" size="20" />：ひらがな・カタカナで入力してください。

・デモページはこちら

テキストインプットの制御では、そもそも入力できなければいいのではないかと考えますよね。特に数値の入力には気を使います。負の入力は不可としたかったり、整数のみ入力可としたかったりと、ユーザー要求は様々です。

keypressイベントを使えば、それも可能となります。

ここでは、正数値のみ入力可(負数の入力は不可)とする入力制御を紹介します。

まずチェックロジックですが、which プロパティによるキーコード判定でおこないます。

キーコードはブラウザによって異なります。ここでは IE でチェックしました。

/**
 * 正数値かチェック
 * @param e event
 * @returns true:正数値, false:正数値以外
 */
function isPositive(e) {
  if ( (e.which < "0".charCodeAt(0) || "9".charCodeAt(0) < e.which) && e.which != 8 && e.which != 0 && e.which != 46 )
    return false;
  return true;
}

入力時、LeftやRightボタンを自由に使いたかったこともあり、which プロパティによる判断をすることにしました。小数点以下の入力も想定し、「.」は入力可能となっています。正の数値のみ許可なので、「-」は入力できません。ただし、コピペには対応できていません。

呼び出し元は jQuery で書いておきましょう。ここでは jQuery 3.3.1 を利用します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function(){$("#text4").keypress(function(event){return isPositive(event);});});

htmlはこんな感じです。

<input type="text" id="text4" size="20" style="ime-mode: disabled" />：正数値で入力してください。

・デモページはこちら

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」というプラグインがあります。正/負、整数/小数点のチェックまでおこなってくれる素晴らしいプラグインです。コピペにも対応されています。

ここでは jquery.numeric.jsの使い方 を紹介します。

・「jQuery - numeric」のダウンロードはこちら

スクリプトを配置します。ここでは jQuery 3.3.1 を利用します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.numeric.js"></script>

<script type="text/javascript">
$(".numeric").numeric();//数値
$(".integer").numeric({ decimal: false });//整数
$(".positive").numeric({ negative: false });//正の数値
$(".positive-integer").numeric({ decimal: false, negative: false });//正の整数
$(".right-click-paste").change(function() {$(this).keyup();});//右クリック貼り付け制御
</script>

class名に指定した名前によってチェックロジックを変えるようにコーディングします。

htmlはこんな感じです。

<input type="text" class="numeric right-click-paste">：数値のみ入力できます。
<input type="text" class="integer right-click-paste">：整数のみ入力できます。
<input type="text" class="positive right-click-paste">：正の数値のみ入力できます。
<input type="text" class="positive-integer right-click-paste">：正の整数のみ入力できます。

・デモページはこちら

個人的には自前でゴリゴリとコーディングするよりも、プラグインを使ったコーディングをした方が生産性も向上し、結果的に高い品質を保てると思っています。特に、キーコードはブラウザに依存しますので、各ブラウザ対応が必要となります。自前で作る場合、品質には十分ご注意ください。

今回ご紹介した以外の方法でも入力チェックや入力制限をかける方法があると思いますので、ぜひチェックしてみてください。また、紹介した方法で不備などあればコメントでご指摘いただけると助かります。