password入力させる場合で半角英数字しか入力させない方法

Question

ユーザーに入力させるパスワードのinput要素を作成しております。
i要素をクリックするとtype="password"からtype="text"に変更されるため
ユーザーから可視化されます。

ユーザーから受け付ける文字は、キー入力時点で半角英数字のみに
限定したいと考えているのですが
・一方でinput type="password"でも検討したのですが、ペーストで全角を
受け入れてしまいます。
・また、下記のように正規表現で（passwordであってもtextであっても）、keyupにして
一度入力を受け付けてval("")で消えるという動作をしてしまいます。

そもそも入力自体を半角（大文字、小文字）英数字しか受け付けないようなことをjquery等で
実装することは可能なのでしょうか。
input typeはこだわらないのですが、マスキング（●）を追加的に実装するのが手間なため
ベースはtype="password"が良いかと考えております。

アドバイスのほど、よろしくお願い申し上げます。

<input type="password" id="password_1" class="register_text" minlength="8" maxlength="15" placeholder="パスワード（8文字以上15文字以内）"/>
 <i class="fa fa-square" aria-hidden="true"></i></div>

.fa-square{
    position: absolute;
    top: 106px;
    right: 45px;
    font-size: 10px;
    color: #52525263;
    cursor: pointer;
}

.fa-square_change{
    top: 106px;
    right: 45px;
    color: #565656;
}

  $(".fa-square").on('click',function(){
      if($(".fa-square").hasClass("fa-square_change")){
        $("#password_1").attr("type","password");
        $(".fa-square").removeClass("fa-square_change");
      }else{
        $("#password_1").attr("type","text");
        $(".fa-square").addClass("fa-square_change");
      }
  })

  $("#password_1").on('keyup',function(){
    if(!($(this).val().match(/[^a-zA-Z0-9]/))){
      $(this).val("");
    };
  })

Answer 1

そもそも、クライアントサイドでチェックするというのは、入力誤りを早期発見するという意図だと思うので、全角文字のコピペ入力はサーバーサイドでのチェック時まで遅れてもユーザーに不親切と言うことは無いかと思います。

ところで、

半角英数字のみに

は、「半角文字のみ」の書き誤りだと思って質問文を読んでいましたが、コードにmatch(/[a-z0-9]/)が！！
パスワードの文字種類制限は、セキュリティを気にしないシステムに留めましょう。

Comments

[SugiuraY]

コメントありがとうございます。
コードが、大文字を含んでいなかったので、念のために修正しましたが、意図としては
半角（大文字小文字）＋半角数字でした。
承知をいたしました、思っていたより根が深い問題なのですね。
ある程度にとどめて、サーバーサイドに厳密なチェックを委ねようと思います。

[otn]

「半角文字だけ」を正規表現でチェックするのは、/[^!-~]/ です。

Answer 2

そもそも入力自体を半角英数字しか受け付けないようなことをjquery等で

実装することは可能なのでしょうか。

技術的には可能かもしれませんが、やるべきではありません。たとえば、「abc*12345」のようなパスワードを設定しようと入力した際に、途中で文字を削ってしまうと、

• 登録した本人…abc*12345を入力したと思っている
• 実際の登録…*が削除されてabc12345が登録されている

という意図しない結果を招いてしまいます。強制削除ではなく、「使えない文字が入っています」のようなメッセージを出して対応すべきです。

余談ですが、パスワードの文字種制限はどのような場合に必要なのか、前々から気になっています。

Comments

[maisumakun]

パスワードがmaxlengthでぶった切られて、意図しない設定となった話

https://qiita.com/kawaz/items/d462a05c113b8e063736

[SugiuraY]

コメントありがとうございます。
jun68ykt様のおっしゃる通り、確認側との相違でユーザーに気づかせるというのも一つの手段かもしれませんが、これほどパスワードが根が深い問題とは。。
実はスタート時点では、意図しない削除やreplaceと言うよりも、そもそも一部の文字をtypeやpasteを認めないことをクライアントサイドでもできないかという方向で調べていたのですがどちらにしてもマスキングされている状態ではユーザーの意図しない結果が登録されるリスクが存在する以上、なかなか難しいもんでいですね。

Answer 3

こんにちは

他にもやり方があるかもしれませんが、以下はいかがでしょう？
(※例として、対象の input を <input name="username" />としています）

$('input[name="username"]').keyup(function(){
  var v = $(this).val();
  $(this).val(v.replace(/[^a-zA-Z0-9]/g,''));
});

上記は、 <input name="username" /> に半角英数字以外の入力があっても、それを除去した値を val() で上書きしています。（正規表現の g オプションは、全角で早くタイピングされたときに全角文字がいくつか残る場合があるのと、記号を複数含むテキストをコピペされたときのために付けています。）

以下は上記のサンプルです。

• https://jsfiddle.net/jun68ykt/hvquyr8t/4/

参考になれば幸いです。

追記

maisumakunさんのご指摘どおり、許容する文字以外を入力時に削ってしまうと、ユーザーが意図しないパスワードが設定されてしまうことがあり得ますので、これを回避するために、（様々な登録フォームで見かけますが）もうひとつ確認用のパスワード入力欄を設けて、そちらはユーザーからの入力を削らずにそのまま保持し、送信ボタンがクリックされるなどしたときに、二つのパスワード入力欄の値の一致をバリデーションのひとつに追加することをお勧めします。

以下はそのサンプルです。

• https://jsfiddle.net/jun68ykt/6hkpc3a9/4/

上記のサンプルですが、メモ帳か何かに、たとえばabc-DEF++G と打っておいて、これを上下のパスワード入力にコピペすると、上のほうは記号が削られて入力値は abcDEFG となり、下のほうは削る処理をしないので abc-DEF++G がそのまま入ってきます。送信ボタンをクリックすると両者が一致しない旨のalertを表示します。

Comments

[jun68ykt]

すみません。質問者さまの書かれているコードとほぼ同じなので、別案があれば後ほど追記します。

[maisumakun]

このように、強制的に値を削ってしまうと、コピペで記号などが入った値を貼り付けた際に、一部だけ削られて「意図しないパスワードが設定される」という事態となるので、やるべきではありません。

[jun68ykt]

@maisumakunさん

その問題は、よく見かける方法で回避できます。その方法とは、もうひとつ確認用のパスワード入力欄を設けて、そちらは文字の削除をしないようにしておくことです。
>コピペ
するユーザーは、確認用のもうひとつのパスワード入力欄にもコピペするでしょうから、コピペで入力したけれども記号が削られたほうと、確認用のほうとが一致しないということで、バリデーションエラーとすることができて意図しないパスワードが設定されることを防ぐことができます。
また、パスワード入力が●でマスクされるとすると、パスワード入力欄の●の数が、確認用パスワードのほうにコピペしたほうの数よりも少なくなるので、その時点でパスワードに受けつけられない文字を入れてしまったことに気がつける可能性もありますね。

とはいえ、受けつけられない文字が入力されたときに、削るにしても、「パスワードに使える文字は半角英数字のみです」というようなメッセージを表示して、注意を喚起することはしたほうがよいと思います。

[jun68ykt]

@SugiuraYさん

maisumakunさんご指摘の点を考慮した追記を回答のほうに書きましたので、ご確認ください。

[退会済みユーザー]

分かりやすい回答ですね。

[jun68ykt]

@easy_no_easyさん

ありがとうございます。そう仰って頂けますと、回答者冥利に尽きます！

[SugiuraY]

jun68ykt様
ありがとうございます。強制的な削除について、意図しないものが登録されないように、確認用では緩やかに判定して一致を確認すると言うことですね。確認用もマスキングする以上、不一致の原因が何かについて、アラートの内容で詳しく案内してあげる必要は出てきそうですね、当然それぞれのパスワードを具体的に表示してあげるべきではないと思うので、、
一度、アドバイスをいただいた方法で、実装をしてみて、自分なりに改良してみます！
とても、参考になるアドバイスをいただき、助かりました、深く御礼もうし上げます。

[jun68ykt]

@SugiuraYさん
どういたしまして。私のほうも改めて、パスワード入力時に受けつけない文字の削除をした場合のリスクと対処を整理することができました。ありがとうございました。