Question

我有一个在线商店，其中有一个签出表格，用于输入您的姓名，地址和联系方式。

HTML5 autocomplete代码通常适用于Chrome / Android用户，但遗憾的是，邮政编码和城市组合在一个字段中有一个文本字段（例如，＆＃34; 10559 Berlin＆＃34;）

我似乎只能使用autocomplete='postal code'或autocomplete='address-level2'标记此字段，但不能同时在一个字段中标记这两个字段，因此autocomplete='postal-code address-level2'会在使用自动填充时仅将Chrome插入城市，但不是邮政编码。

有人可能知道如何将这两个自动完成令牌组合成一个单独的字段吗？

Answer 1

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

还有其他方法，如使用邮政编码的自动填充城市，我的猜测将是另一种方式 - 自动填充给定城市/村庄的邮政编码等因为它经常出现这种情况村庄的人数相同（街道名称也相同）！

您可以在特定的oninput字段中收听input并在插入城市后添加邮政编码，然后转到autocomplete="address-level2"。

Answer 2

如果你想变得非常hacky，你可以让它看起来像一个输入框，但每个都有自己的autocomplete标签，它会在输入空格时自动切换框，或者在选择后用户标签自动填充列表中的值。

见这个例子：

＆＃13;

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();

＆＃13;

input {
  border: 1px solid black;
}

#zipInput {
  border-right: none;
  width: 75px;
}

#cityInput {
  border-left: none;
  width: 125px;
}

＆＃13;

<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>

＆＃13;

Answer 3

您好我的德国朋友; - ）

最后，我决定将邮政编码和城市的组合字段分为两个字段，一个用于邮政编码，一个用于城市。所以我可以为每一个使用一个自动完成令牌，虽然这种分离也会在代码中的其他位置引起一些变化。

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 =“hid”是第二个输入字段。（显示：无效）

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

4 个答案: