質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

6663閲覧

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

SugiuraY

総合スコア317

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/10/28 11:45

編集2018/10/28 23:05

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

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

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

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

html

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

css

1.fa-square{ 2 position: absolute; 3 top: 106px; 4 right: 45px; 5 font-size: 10px; 6 color: #52525263; 7 cursor: pointer; 8} 9 10.fa-square_change{ 11 top: 106px; 12 right: 45px; 13 color: #565656; 14}

javascript

1 $(".fa-square").on('click',function(){ 2 if($(".fa-square").hasClass("fa-square_change")){ 3 $("#password_1").attr("type","password"); 4 $(".fa-square").removeClass("fa-square_change"); 5 }else{ 6 $("#password_1").attr("type","text"); 7 $(".fa-square").addClass("fa-square_change"); 8 } 9 }) 10 11 $("#password_1").on('keyup',function(){ 12 if(!($(this).val().match(/[^a-zA-Z0-9]/))){ 13 $(this).val(""); 14 }; 15 }) 16

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

ところで、

半角英数字のみに

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

投稿2018/10/28 13:53

otn

総合スコア84423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2018/10/28 23:02

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

2018/10/29 01:57

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

0

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

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

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

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

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

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

投稿2018/10/28 12:43

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2018/10/28 23:12

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

0

ベストアンサー

こんにちは

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

javascript

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

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

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

参考になれば幸いです。

追記

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

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

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

投稿2018/10/28 12:34

編集2018/10/28 15:27
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2018/10/28 14:20 編集

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

2018/10/28 12:38

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

2018/10/28 13:13

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

2018/10/28 13:55

@SugiuraYさん maisumakunさんご指摘の点を考慮した追記を回答のほうに書きましたので、ご確認ください。
退会済みユーザー

退会済みユーザー

2018/10/28 14:53

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

2018/10/28 15:15

@easy_no_easyさん ありがとうございます。そう仰って頂けますと、回答者冥利に尽きます!
SugiuraY

2018/10/28 23:16

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

2018/10/29 10:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問