HTML5、オートコンプリート：1つのテキストフィールドに郵便番号と住所レベル2を組み合わせるにはどうすればよいですか？

Question

私はあなたの名前、住所、連絡先のデータを入力するためのチェックアウトフォームを持つオンラインショップを持っています。

HTML5 autocompleteタグは一般的にChrome/Androidユーザー向けですが、残念ながら、1つのフィールドに郵便番号と都市のテキストフィールドが1つ（「10559ベルリン」など）あります。

は、それは私が唯一のフィールドで両方を一緒autocomplete='postal code'またはautocomplete='address-level2'と、このフィールドにタグを付けることはできませんが、と思われるので、autocomplete='postal-code address-level2'はクロームのみオートフィルが使用されている都市ではなく、郵便番号を挿入します。

誰かが、これらの2つのオートコンプリートトークンを1つのフィールドでどのように組み合わせるかを知っている人はいますか？

Answer 1

このようにすることはできません。

郵便番号とオートフィル街のような他の方法がありますが、私の推測では、それを他の方法を行うことであろう - オートフィル郵便番号になど与えられた都市/村であるため、多くの村が同じを持っていることをその多くの場合番号（そして同じ通りの名前）！

inputフィールドにはoninput欄に行き、都市が挿入された後に郵便番号を追加すると、autocomplete="address-level2"になります。あなたが本当にハック取得したい場合は

Answer 2

は、あなたはそれが一つの入力ボックスのように見えるようにできますが、それぞれが独自のautocompleteのタグを持っており、それが自動的にスペースが入力されたときにスイッチボックスまたはだろうというときから値を選択した後、ユーザータブオートフィルリスト

は、この例を参照してください：

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

こんにちは、私のドイツの友人;-)

最後に、私は2つのフィールドに郵便番号、市を合わせたフィールドを分離することを決定し、 1つは郵便番号用、もう1つは都市用です。そのため、コード内の別の場所でもいくつかの変更が発生しましたが、それぞれに1つのオートコンプリートトークンを使用できます。

Answer 4

これはできませんが、あなたは醜いトリックを使用することができます。第二の入力テキストはどこにでもサイトにユーザーがここに:)

を見ることはできません置くことは私のjsfiddleです：この例では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> 

IDは=第二の入力フィールドである「隠し」されます。