#Firefox の設定では入力履歴が残るように設定してあるのだが、私が作成したフォームで入力履歴が残らない問題が発生した。残さない方が嬉しい人もいるだろうが、残ってくれた方が便利なこともある。
それで、 #Gemini に相談しながら問題を探ったのだが、最初に確認を求められたのが次のコード。
<!DOCTYPE html>
<html>
<head>
<title>入力履歴テスト</title>
</head>
<body>
<input type="text" id="testInput" name="test_input">
<script>
document.getElementById('testInput').addEventListener('blur', function() {
console.log('入力が完了しました。');
});
</script>
</body>
</html>F12のコンソールを確認すると、inputにカーソルが表示されないようにすると、「入力が完了しました。」と表示されて正常に機能しているが、inputに入力された文字を消した後、履歴は残らない。
それで、いろいろと試した後、次のコードで試すことを提案された。
<!DOCTYPE html>
<html>
<head>
<title>入力履歴テスト</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="text" id="testInput" name="test_input">
</form>
<script>
document.getElementById('testInput').addEventListener('blur', function() {
console.log('入力が完了しました。');
});
</script>
</body>
</html>違いは<form>の有無。これでinputに入力した後にEnterキーを叩くと入力した文字が消えちゃうのだが、入力履歴が残った。そんなわけで、<form>が必要とのことで、でも、実際にEnterキーが押されるなどして余計なことが起こらないようにということで、元のコードが余計に複雑になってしまった。履歴を残すもっと簡単な方法はないか探ってみたい。
コメント
ここのサンプル。
#Firefox だと入力しても履歴が残らないどころか何も起こらないのだけど、 #Edge でこのページを開いたら、入力部分の読み込みに時間がかかって、中断して再読み込みしてようやく表示されたのだけど、ダブルクリックしたら、私の個人情報が表示された。ブラウザのデータを読み込んだみたい。私がやりたいのはそういうことではなくて…。
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete
ドメインの入力の手間を省きたかったのだけど、「name="～"」の「～」の部分をドメイン入力でよく使われているものにすれば便乗できそう。私の場合、「name="site"」で一つだけ出てきた。ただ、どこで入力したか分からず、消した後は表示されない。マストドンシェアボタンが怪しかったのだけど、そこには以前の入力が残るけれど、履歴とは違いそうで、便乗できなかった。「name="url"」は大量にあったが、邪魔な情報ばかり。「name="domain"」「name="instance"」は一つも表示されない。「name="domain"」にしておこうかな。