Lassen Sie Texteingabefelder sich an zuvor eingegebene Daten erinnern

Lesezeit: 5 Minuten

Benutzeravatar von 1252748
1252748

Meine Texteingaben scheinen sich nicht an zuvor eingegebene Werte zu erinnern. Viele Websites, auf denen ich nicht einmal ein Konto habe, aber beispielsweise meine E-Mail-Adresse zuvor eingegeben habe (Kauf eines Zugtickets als “Gast”), geben mir eine Art Dropdown mit E-Mail-Adressen, die ich verwendet habe in der Vergangenheit. Doch meine Form tut dies nicht. Es verpflichtet mich, es jedes Mal vollständig abzutippen. Es scheint das Gegenteil dieser Frage zu sein …

Ich habe einfache Eingänge wie <input type="text" id="firstName" placeholder="First name" />

Und sie werden mit einem einfachen jQuery-Ajax-Post eingereicht. Etwas wie Dies. Allerdings arbeitet Ajax in diesem Beispiel nicht an jsbin, ich zeige es nur, um meine Grundstruktur zu demonstrieren. Gibt es dafür ein jQuery-Plugin? Gibt es eine Möglichkeit, dieses scheinbar browsergesteuerte Verhalten zu kontrollieren?

  • viele Websites, auf denen ich nicht einmal ein Konto habe .. Websites merken sich diese Werte nicht. Es wird vom Browser gespeichert.

    – Mohammed Adil

    8. Mai 2013 um 15:30 Uhr

  • Wie Sie verstehen, ist es browsergesteuert. Ich glaube nicht, dass Sie etwas tun können, wenn Ihre Browsereinstellung etwas anderes sagt.

    – hüpfen

    8. Mai 2013 um 15:31 Uhr

Benutzeravatar von Jeff Moretti
Jeff Moretti

Ich hatte das gleiche Problem. Für mich war es bei der Entwicklung in ASP.NET MVC. Wie auch immer, die Lösung, die ich machen musste, war eine Kombination von Dingen:

  1. Das in meinen Eingabe-Tags definierte Namensattribut haben

  2. Haben autocomplete="on" in meinen Input-Tags

  3. Ändern des Schaltflächen-Tags in a type="submit" Schild

  4. Einschließen aller meiner Eingabesteuerelemente in a <form> Schild

  • In Firefox konnte ich das nicht zum Laufen bringen, bis ich alle diese Schritte befolgt habe. Die am höchsten bewertete Antwort war nicht genug. Für das, was es wert ist, mache ich eine Single-Page-App.

    – Daniel Kaplan

    28. April 2021 um 23:08 Uhr

Benutzeravatar von Georgios Balasis
Georgios Balasis

In den meisten Browsern können Sie Ihren Browser veranlassen, zuvor in Eingabefelder eingegebene Werte anzuzeigen, indem Sie der Eingabe einen Namen geben. Zum Beispiel:

<input type="text" id="firstName" placeholder="First name" name="firstName" >

Wenn das Feld kein Namensattribut hat, zeigt der Browser keine Vorschläge an.

Überprüfen Sie auch, ob Javascript die Standardaktion beim Senden verhindert.

  • ist es immer noch wahr? Es scheint, dass Browser jetzt viel mehr Heuristiken für das automatische Ausfüllen haben

    – gaurav5430

    6. November 2019 um 17:17 Uhr

Benutzeravatar von Andrei Nemes
Andrej Nemes

Es kann je nach Browser und Datenschutzeinstellungen und -art des Benutzers variieren, und es sollte standardmäßig aktiviert sein, aber versuchen Sie, es hinzuzufügen autocomplete="on" zu Ihrem Input-Tag.

  • autocomplete=”on” sollte die Voreinstellung sein. Wenn sich der Browser nicht erinnert, können wir es nicht überschreiben

    – hüpfen

    8. Mai 2013 um 15:31 Uhr

  • Die Spezifikation sagt, dass die Standardeinstellung aktiviert ist – dev.w3.org/html5/spec-author-view/…

    – hüpfen

    8. Mai 2013 um 15:34 Uhr

  • Der Standard autocomplete Wert für Eingabefelder ist an, also sollte das Setzen dieses Attributs nichts bewirken. Diese Einstellung ist eine browsergesteuerte Einstellung. Wenn die Einstellungen des Benutzers im Browser das Speichern von Autocomplete-Werten nicht zulassen, wird nichts, was Sie hinzufügen, ändern, modifizieren, ändern, erstellen usw., dies ändern. Der Benutzer müsste seine Browsereinstellungen aktualisieren, um dies zu ermöglichen.

    – War10ck

    8. Mai 2013 um 15:50 Uhr

  • Das hat bei mir funktioniert. Bei einem Framework, das ich verwendet habe, muss es deaktiviert gewesen sein. Danke, dass Sie die Antwort auch mit negativen Punkten aufrechterhalten.

    – Anonym1

    15. Mai 2015 um 4:10 Uhr

Benutzeravatar von hanshenrik
Hansenrik

Einige Browser weigerten sich hartnäckig, sich eine Eingabe zu merken, bis ich mich “manuell daran erinnerte”, indem ich localStorage (ab)benutzte … das funktionierte für mich:

    {
        // hack to remember last error id on page refresh
        // can't believe i have to do this, but my browser don't want to remember it itself, 
        // ... not sure why
        let errorid_element=document.querySelector("#errorlog_id");
        let rememberHack=function(){
            localStorage.setItem("last_id_remember_hack",errorid_element.value);
        };
        errorid_element.addEventListener("input",rememberHack);
        errorid_element.addEventListener("change",rememberHack);
        errorid_element.value = localStorage.getItem("last_id_remember_hack");
    }

In Bootstrap würden Sie das Feld for=”” ausfüllen

Beispiel:

    <div class="custom-control custom-checkbox checkbox-lg">
      <input type="checkbox" class="custom-control-input" id="TER" value="TER">
      <label class="custom-control-label" for="TER">Land/Lot</label>
    </div>

^ Beachten Sie, wie zum und Ich würde Werte passen

Wenn Sie React verwenden

  • Geben Sie jedem Eingang einen Namen
  • einpacken <form>
  • Standardformularaktion verhindern
  • hinzufügen type="submit" auf allen Submission-Buttons und nicht enthalten onClick. Lasst den onSubmit Callback handhabt das.

Wenn Sie jetzt die Eingabetaste drücken oder auf die Schaltfläche klicken, wird der eingegebene Wert gespeichert.

<form onSubmit={(e) => {
        e.preventDefault(); // prevent new page from being opened
        // do something with input data
     }
}>
    <input name="myInput" ... />
    <button type="submit" ... />
</form>

https://reactjs.org/docs/forms.html

Benutzeravatar von Tareq Saif
Tarek Saif

Das Folgende hat bei mir gut funktioniert. Ich kopiere und füge die wichtigen Teile ein, sodass Sie sie möglicherweise leicht anpassen müssen, damit sie für Sie funktioniert, aber sie sollte größtenteils “einfach funktionieren”.

$(function(){
  function save_user_inputs(ev){
    $("input").each(function(index, $input){
      if ($input.name == ""){
        return true;
      }       
      localStorage.setItem("input." + $input.name, $input.value);
    }); 
    return true;
  } 

  function load_user_inputs(){
    var input_names = Object.keys(localStorage);
    for(var i=0; i<input_names.length; i++){
      var input_name = input_names[i];
      if (!input_name.startsWith("input.")){
        continue;
      }   
      var $input = $("[name=""+input_name.split(".")[1]+""]")
      $input.val(localStorage[input_name]);
    }   
  } 
        
  $(document).on('submit', save_user_inputs);
  load_user_inputs();
});

1404780cookie-checkLassen Sie Texteingabefelder sich an zuvor eingegebene Daten erinnern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy