JavaScriptのアレンジがしたいです

以下のサイトを参考に簡易的なパスワード認証を製作しています。
https://allabout.co.jp/gm/gc/23839/

この仕組みを少しアレンジしたく、質問をさせていただきました。
実行したいことは以下の３つです。

①ポップアップではなくWebページに入力フォームを作ってパスワード認証をしたい。

②IDも入力できるようにしたい。
　つまりID+パスワードのURLに移動できるようにするということです。

③できればパスワードのフォームは入力した文字が「＊」や「・」になるようにしたい。

ご回答お待ちしております。


以下に上記サイトに記載されている初期のソースを載せておきます。ご参考になれば幸いです。

<input type="button" value="パスワードを入力して秘密のページへアクセスする" onclick="gate();">

<script type="text/javascript">
function gate(){
// ▼ユーザの入力を求める
var UserInput = prompt("パスワードを入力して下さい:","");
// ▼入力内容をチェック
if( /\W+/g.test(UserInput) ) {
// ▼半角英数字以外の文字が存在したらエラー
alert("半角英数字のみを入力して下さい。");
}
// ▼キャンセルをチェック
else if( UserInput != null ) {
// ▼入力内容からファイル名を生成して移動
location.href = UserInput + ".html";
}
}
</script>

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/06/29 10:45

こんにちは

回答がないようですので・・・

なさりたいことの意味がよくわかりませんが、ひとまず、ご質問に対する回答を。

①別ページに入力欄だけを作成して、リンクでそのページを呼び出せばよいです。
別ページのHTMLでもよいですが、同一ページ内の要素の表示/非表示を切り替えることでもほぼ同様のことが行えると思います。

②上記の入力欄をふたつにして、ＩＤとPasswordにすれば良いです。
javascriptでは文字列の連結は「＋」演算子でできますので、ご例示のUserInputの部分を ID + Password に変えることで実現できるでしょう。

③下記のように「input type="password"」を利用すれば可能です。
<form>
　<p>ID：<input name="ID" /></p>
　<p>Password：<input type="password" name="Pass" /></p>
　<p>
　<input type="button" value="OK" onclick="let f=this.form;location.href=f.ID.value + f.Pass.value + '.html'" />
　</p>
</form>
ご質問文のような利用の場合は、form要素とする必要もないかもしれませんので、divなどにしておいても良いのかも知れません。


とは言え、そもそもがURLを直接指定するだけのものなので、IDとかPasswordに分割することの意味がありません。（手間が増えるだけ）
直接アクセスしてもそのまま表示できますし、決められた指定された単語以外を入力すれば「File Not Found」になってしまいますから。
その意味では、IDやPasswordの一般的イメージとは全く異なるので、ミスディレクションになりやすいです。

この回答へのお礼

どうもありがとうございました。

お礼日時：2020/07/05 11:19