HTML5, Autocomplete: Wie kombiniere ich Postleitzahl und Adressniveau2 in einem einzigen Textfeld?

Question

Ich habe einen Online-Shop mit einem Check-Out-Formular zur Eingabe Ihres Namens, Ihrer Adresse und Kontaktdaten.

Die Tags HTML5 autocomplete funktionieren in der Regel für Chrome-/Android-Benutzer, aber leider gibt es ein Textfeld für Postleitzahl und Stadt in einem Feld (z. B. "10559 Berlin").

Es scheint, dass ich nur dieses Feld mit autocomplete='postal code' oder autocomplete='address-level2' markieren können, aber nicht beide zusammen in einem Feld, so autocomplete='postal-code address-level2' machen Chrome nur die Stadt ein, wenn autofill verwendet wird, aber nicht die Postleitzahl.

Kann jemand vielleicht diese zwei Autovervollständigungstoken für ein einzelnes Feld kombinieren?

Answer 1

Das ist nicht möglich - auf diese Weise.

Es gibt auch andere Möglichkeiten, wie autofill Stadt mit Postleitzahl, wäre meine Vermutung es anders zu tun - zu autofill Postleitzahl mit bestimmten Stadt/Dorf usw., weil sein oft der Fall, dass viele Dörfer das gleiche haben Nummer (und auch die gleichen Straßennamen)!

Sie würden gehen und hören oninput für die spezifische input Feld und fügen Sie die Postleitzahl, nachdem die Stadt eingefügt wird so gehen Sie für autocomplete="address-level2".

Answer 2

Wenn Sie wirklich Hacky bekommen möchten, können Sie es wie ein Eingabefeld aussehen, aber jeder hat seine eigene autocomplete Tag und es würde automatisch Boxen wechseln, wenn ein Raum eingegeben wird oder wenn der Benutzer Registerkarten, nachdem ein Wert von der Auswahl die AutoFill-Liste.

Sehen Sie folgendes Beispiel:

var zipInput = document.getElementById('zipInput'); 
 
var cityInput = document.getElementById('cityInput'); 
 

 
zipInput.addEventListener('keyup', function() { 
 
    if (zipInput.value.slice(-1) != " ") { 
 
    return; 
 
    } 
 
    var text = zipInput.value.split(" ")[0]; 
 
    cityInput.focus(); 
 
}); 
 

 
zipInput.focus();

input { 
 
    border: 1px solid black; 
 
} 
 

 
#zipInput { 
 
    border-right: none; 
 
    width: 75px; 
 
} 
 

 
#cityInput { 
 
    border-left: none; 
 
    width: 125px; 
 
}

<h4>Postal Code & City:</h4> 
 
<form onsubmit="javascript: return false;"> 
 
    <input id="zipInput" autocomplete='postal code'><input id="cityInput" autocomplete='address-level2'> 
 
    <button type="submit">Submit</button> 
 
</form> 
 

 
<br><br>

Answer 3

Hallo meine deutschen Freunde ;-)

Schließlich habe ich beschlossen, das kombinierte Feld für Postleitzahl und Stadt in zwei Felder zu trennen, eine für die Postleitzahl und eine für die Stadt. Daher kann ich für jedes ein einzelnes Autocomplete-Token verwenden, obwohl die Trennung einige Änderungen auch an anderen Stellen innerhalb des Codes verursachte.

Answer 4

Es ist nicht möglich, aber Sie können einen hässlichen Trick verwenden. legt den zweiten Eingang Text überall auf der Website der Benutzer nicht :)

hier sehen können meine jsfiddle ist: jsfiddle

Address: <input type="text" id="autocomp" value="" autocomplete="postal-code"> 
<input id="hid" type ="text" value="" autocomplete="locality" onchange="change()"> 

<script> 

function change() { 
var a = document.getElementById("hid").value; 
var b = document.getElementById("autocomp").value; 
var c = b + " " +a; 
document.getElementById("autocomp").value = c; 
} 

</script> 

in diesem Beispiel ist die id = „versteckten“ ist das zweite Eingabefeld. (Anzeige: keine funktioniert nicht)