电话号码的 HTML 输入类型

Question

我想知道我可以使用哪种类型输入电话号码。

当我这样做时，我可以输入字母：

 <input type="tel" id="phone" name="phone" required>

另外，我想删除右边的那个箭头：

 <input type="number" id="phone" name="phone" required>

我想要的是仅输入电话号码的输入。

原文由 darcy111 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 tel 你可以只添加一些验证只允许数字（你也可以添加一个 + 预先并包括你需要的任何国家代码）。

 <form>
  <input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}" required>
  <button>Submit</button>
</form>

提交时会报错

或者您可以限制为数字并通过这样做隐藏箭头：

 .no-arrow {
  -moz-appearance: textfield;
}
.no-arrow::-webkit-inner-spin-button {
  display: none;
}
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

 <form>
  <input id="phone" name="phone" class="no-arrow" value="" type="number">
  <button>Submit</button>
</form>

原文由 coops 发布，翻译遵循 CC BY-SA 4.0 许可协议