Javascript jQueryで半角・数字・かな入力チェックと数値入力制限する方法 ホームページ制作 | 墨田区

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

LINEで送る
Pocket

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

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

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

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




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Javascript(jQuery)で入力チェック

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

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

/**
 * 半角英数字かチェック
 * @return true:半角英数字である(もしくは対象文字列がない), false:半角英数字でない
 */
function isHalfWidthAlphanumeric(value) {
  if ( value == null )
    return;
  if( value.match( /[^A-Za-z0-9\s.-]+/ ) ) {
    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 2.1.4 を利用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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 2.1.4 を利用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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」のダウンロードはこちら

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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">:正の整数のみ入力できます。

デモページはこちら


まとめ

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

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


おつかれさまでした。

LINEで送る
Pocket

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

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL