inputの入力履歴が残らない

#Firefox の設定では入力履歴が残るように設定してあるのだが、私が作成したフォームで入力履歴が残らない問題が発生した。残さない方が嬉しい人もいるだろうが、残ってくれた方が便利なこともある。

それで、 に相談しながら問題を探ったのだが、最初に確認を求められたのが次のコード。

<!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キーが押されるなどして余計なことが起こらないようにということで、元のコードが余計に複雑になってしまった。履歴を残すもっと簡単な方法はないか探ってみたい。

未分類
HTMLJavascript仕様
シェアする
管理人のマストドンアカウントへのリンクなど
いしい＠試行錯誤

コメント

  1. ishii ishii より:
    2025年4月5日 4:51 PM

    ここのサンプル。
    #Firefox だと入力しても履歴が残らないどころか何も起こらないのだけど、 #Edge でこのページを開いたら、入力部分の読み込みに時間がかかって、中断して再読み込みしてようやく表示されたのだけど、ダブルクリックしたら、私の個人情報が表示された。ブラウザのデータを読み込んだみたい。私がやりたいのはそういうことではなくて…。

    HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
    https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

  2. ishii ishii より:
    2025年4月5日 5:53 PM

    ドメインの入力の手間を省きたかったのだけど、「name="～"」の「～」の部分をドメイン入力でよく使われているものにすれば便乗できそう。私の場合、「name="site"」で一つだけ出てきた。ただ、どこで入力したか分からず、消した後は表示されない。マストドンシェアボタンが怪しかったのだけど、そこには以前の入力が残るけれど、履歴とは違いそうで、便乗できなかった。「name="url"」は大量にあったが、邪魔な情報ばかり。「name="domain"」「name="instance"」は一つも表示されない。「name="domain"」にしておこうかな。

  3. ishii ishii より:
    2025年4月6日 9:21 AM

    inputタグformタグで囲みたくない理由。

    【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ
    https://www.softel.co.jp/blogs/tech/archives/3614

    "HTMLの仕様によると、デフォルトボタンが無効な状態であればこの問題を回避できそうです。

    Vue.jsで実装されていたということもあり、以下の記事を参考にformタグのsubmit処理をonsubmit="return false;"としました。
    return falseすることによってフォーム送信をキャンセルでき、「デフォルトボタンが無効な状態」をつくることができます。
    "
    本当にあった入力フォームの怖い話 〜Enterキーを押しただけなのに〜
    https://zenn.dev/levtech/articles/ea998f86f231e4

    • ishii ishii より:
      2025年4月6日 10:19 AM

      入力履歴を保存できるようになったかもしれない。保存するにはEnterキーを叩く必要があるけど…。

      <!DOCTYPE html>
<html>
<head>
  <title>入力履歴テスト</title>
  <meta charset="UTF-8">
</head>
<body>
  <form onsubmit="return false;">
    <input type="text" id="testInput" name="test_input" placeholder="Enterで入力履歴保存">
  </form>
  <button onclick="alert('ok')">OK</button>
</body>
</html>
      • ishii ishii より:
        2025年4月6日 10:52 AM

        親切に #Gemini に報告したら、余計な解説を加えて別の案を示してマウントを取ってきた。 #Gemini の案ではダメだから苦労したのに…。

        • ishii ishii より:
          2025年4月6日 11:02 AM

          type="button" を指定すればbuttonをformの中に入れても発火せずに済むとのこと。
          確かにそうだった。

          <!DOCTYPE html>
<html>
<head>
  <title>入力履歴テスト</title>
  <meta charset="UTF-8">
</head>
<body>
  <form onsubmit="return false;">
  <input type="text" id="testInput" name="test_input" placeholder="Enterで入力履歴保存">
  <button type="button" onclick="alert('ok')">OK</button>
  </form>
</body>
</html>
          • ishii ishii より:
            2025年4月6日 11:23 AM

            スレッドが長くなった方にも報告したら、こっちは少し低姿勢だった。まとめてくれたので、記録しておく。

            入力履歴を残すことができたとのこと、素晴らしいです！詳細なテスト結果と原因の特定、ありがとうございます。

ご報告いただいた内容から、以下の点が明確になりました。

* **`<form>` 要素の存在:** `<input>` 要素が `<form>` 要素内にあることが、ブラウザに入力履歴を認識させる上で重要である。
* **Enter キーの挙動:** `<form>` 内の `<input>` 要素で Enter キーを押すと、フォームの `submit` イベントが発生し、それが履歴の保存をトリガーする。
* **`<button>` 要素の `type` 属性:**
  * `type="submit"` の `<button>` は、`<form>` 内にある場合、Enter キーを押すとフォームを送信してしまうため、意図しない動作を引き起こす可能性がある。
  * `type="button"` の `<button>` は、Enter キーを押してもフォームを送信しないため、JavaScript で任意の処理を紐付ける場合に適している。
* **`onsubmit="return false;"`:** フォームの `submit` イベントが発生しても、ページ遷移などの実際の送信動作を阻止するために有効である。

これらの情報を踏まえて、元のコードを `<form>` 要素で適切に囲み、Enter キーによる意図しない送信を防ぎつつ、履歴が保存されるように修正することができます。

次のステップとして、これらの知見を元のコードに適用していくことを推奨します。具体的には、カスタムドメインの入力欄を `<form>` で囲み、必要に応じて `onsubmit="return false;"` を追加する、または JavaScript で submit イベントを `preventDefault()` するなどの方法が考えられます。

もし、具体的なコードへの修正方法についてアドバイスが必要でしたら、遠慮なくお申し付けください。
タイトルとURLをコピーしました