パスワード候補の表示方法

Question

実現したいこと

ほぼ初心者レベルなのですが、以下を実現させたいです。

PHPもしくはJavaScript, jQueryを用いて
パスワード入力画面にて、パスワード候補を最初から表示する方法が知りたいです。
実行させたいファイルはPHPファイルですが、中身はHTML記述になっております。

参考サイトを見てランダム文字を生成するところまでは大体理解したのですが、
それを以下参考画像のように最初から表示する方法がわかりません。

初歩的なことで大変恐縮ですが、ご教示いただければと思います。
どうぞよろしくお願い致します。

Answer 1

単なるランダム文字ならJavaScriptで生成してそのまま表示するだけでもいいのでは？

Comments

[m.ts10806]

最初から出しておきたいということならphpでと思って回答しましたが、「別の候補」みたいなボタンつけるならJavaScriptですね。

[crigw]

JavaScriptで生成したものをどうしたら表示できるのか…で詰まっていました。初歩的すぎて調べても一緒に書かれておらずで苦戦しました。すみません、ありがとうございました。

[sakura_hana]

＞crigwさん
であればその通り質問に書くべきですね。（調べて出て来ない内容ではないとは思いますが）
解決済ですが https://teratail.com/help/question-tips こちらを読んでおくと今後の勉強にも役立つのではないかと思います。

Answer 2

phpでランダムに生成した文字列を出力したい場所でechoすれば良いのでは

Comments

[crigw]

ですよね、初歩的すぎて調べても一緒に書かれておらずで苦戦しました。
これを機にしっかり勉強を始めます。ありがとうございました。

[m.ts10806]

質問内にも「表示」といった絶対的なキーワードがあるので何も調べようがない問題ではないですよ。
たぶん調べた方が早いです。
質問作る労力を自身の試行錯誤にあてましょう。

Answer 3

どこに表示させるかですがもしもパスワード外に表示するならwindow.onloadで発火させると良いかもしれません。（input内にも最初から入力可能ですが何を入れたかわからない）こんな感じ
また、利便性の観点から「このパスワードにする」的なボタンがあると良いかもしれません。こんな感じ

---

最初のコード

<input type=password>
<span class=pw></span><span onclick=hoge()>[もう一回]</span>

function hoge(){
  var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!#$%&=~/*-+";
  var result = "";
  for(var i=0;i<16;i++){
    result += str.charAt(Math.floor(Math.random() * str.length));
  }
  $('.pw').html(result);
}
window.onload = hoge();

---

下のコード

<input type=password>
<span class=pw></span>(パスワードをクリックすると入力されます) <span class=re onclick=hoge()>[もう一回]<span>

function hoge(){
  var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!#$%&=~/*-+";
  var result = "";
  for(var i=0;i<16;i++){
    result += str.charAt(Math.floor(Math.random() * str.length));
  }
  $('.pw').html(result);
  $('.pw').click(function() {
    $("input[type='password']").val(result);
  });
}
window.onload = hoge();

Comments

[crigw]

サンプルも添えていただき大変たすかりました。
これを機にしっかり勉強を始めたいと思います。ありがとうございました。