jQueryでinputに半角英数字だけ入力させるには?正しいやり方

jQueryを使って input の入力文字を半角英数字だけに制限したいとき、ありますよね?

例えばログインフォームを作ってユーザー名とかパスワードを半角だけにしたいときとか

という訳でここではそのためのコードの書き方について自分なりに少しまとめてみます。

とりあえず深く考えずに書いてみる

まず次のように input で作ったテキスト欄があるとしましょう。

 

そしてこの中で半角英数字だけ入力という条件で思いついたのが次のコード

うん、正規表現使っててコードも簡潔だし完璧!

・・・と思ってしまいますが、実はこれだと色々問題があるんですよね。

 

その問題は何かっていうと次のようなこと

  • 制御キーが押せない
    Shiftで大文字入力できないし、矢印キーでカーソル移動もできない
  • 全角文字が入力できてしまう
    keydown は全角入力では働かないので全角文字は入力し放題

こういう問題があるから実は完璧そうに見えてすごくザルです。

という訳でこれを解決するためのコードを紹介していきます。

制御キーを入力できるようにする

制御キーっていうのは矢印キーとかシフトとかエンターとか削除とか文字として表示されないキーのこと

そしてそれを入力できるように改善したのが次のコードです。

 

このコード中で半角英数字のチェックに加えて付け加えたのは次のような条件

  • 大文字入力のためにシフトキーの入力可
    シフトが押されると  e.shiftKeyがtrueになるのでそれで判断
  • カーソル移動できるように矢印キーを入力可
    キーコードで判断。 37 <= k && k <= 40 までの部分
  • 削除とデリートキーを入力可
    キーコードで判断。 k === 8 || k === 46 までの部分

他にも制御キーはありますが、利便性を考えればこれだけで十分です。

 

ちなみに制御キーコードについては次の記事で詳しく載っているのでそちらをどうぞ

http://faq.creasus.net/04/0131/CharCode.html

全角文字を入力禁止にする

次に必要なのが全角文字の入力禁止でそれが次のコード

全角の場合、keydown だとイベントを受け取れません。

なので keyup(キーが押された後)blur(テキスト欄からフォーカスが外れた後) が発生したら全角英数字以外を全て空文字に置き換えています。

 

全角だとこういう処理を挟まないとダメなんですよね・・・

これについてはもっといい方法あるかも。もしあったら教えてください。

ここまでのコードまとめ

ここまでのコードの全体像は次の通り

本当に半角英数字だけを入力可にしようとすると意外と大変です。

もしかしたらもう少し短くできるかもしれないですが、そこは色々試してみてください。

でゎでゎ(´ー`)ノシ

inputでの入力制限についての関連記事

ここでは半角英数字のみを入力させる方法を解説しました。

ですがアルファベットを含まない数字のみを入力させる方法もあります。

そのやり方は次の記事でまとめた通りです。

もし生年月日など数字のみしか入力してほしくないならこちらの方法もお試しあれ

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください