电话号码的 HTML 输入类型

Question

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

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

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

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

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

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

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>