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

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

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

テキストインプットの入力を制御したい場合って、大きく分けて以下のケースが多いのではないでしょうか?

  • 半角英数字のみ入力可としたい。
  • 半角数字のみ入力可としたい。
  • ひらがな・カタカナのみ入力可としたい。

入力されたものをチェックしたい場合と、入力自体を制限したい場合がありますね。ここでは、その両方の方法を紹介したいと思います。

先に動作を確認したい方はデモページをどうぞ。

デモページはこちら


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" />:ひらがな・カタカナで入力してください。

デモページはこちら

Javascript(jQuery)で数値入力制御

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

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">:正の整数のみ入力できます。

デモページはこちら

まとめ

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

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

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。