HTML5，自动完成:如何在单个文本字段中组合邮政编码和地址级别2？

Question

我有一个网上商店，有一个结帐表，可以输入你的名字，地址和联系方式。

柏林autocomplete标签通常适用于Chrome/安卓用户，但不幸的是，在一个字段中有一个用于邮政编码和城市的文本字段(例如，"10559 HTML5“)。

似乎我只能用autocomplete='postal-code'或autocomplete='address-level2'标记这个字段，但不能在一个字段中同时使用这两个标记，所以autocomplete='postal-code address-level2'使Chrome在使用自动填充时只插入城市，而不是邮政编码。我还假设反之亦然(即autocomplete='address-level2 postal-code会让Chrome只填写邮政编码)。

有没有人知道如何使用这两个自动完成细节标记到一个具有一个autocomplete属性的单个字段中？

Answer 1

这是不可能做到的--以这种方式。

还有其他的方法，比如用邮政编码自动填充城市，我猜是另一种方式--用给定的城市/村庄等自动填充邮政编码，因为它经常是许多村庄有相同的号码(以及相同的街道名称)的情况！

您将使用oninput监听特定的input字段，并在插入城市后添加邮政编码，因此请使用autocomplete="address-level2"。

Answer 2

如果你想让它看起来像一个输入框，但每个输入框都有自己的autocomplete标签，当用户输入空格或从自动填充列表中选择一个值后按tabs键时，它会自动切换框。

请参阅此示例：

​

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

你好，我的德国朋友;-)

最后，我决定将邮政编码和城市的组合字段分为两个字段，一个用于邮政编码，另一个用于城市。因此，我可以为每个代码使用一个自动完成令牌，尽管这种分离也会在代码中的其他地方造成一些更改。