input type="tel"

<input type="tel">

"tel"类型的<input>元素用于让用户输入电话号码。与<input type =“email”>和<input type =“url”>不同，在提交表单之前，输入值不会被自动验证为特定的格式 - 这是因为电话号码的格式在世界各地变化很大。

不支持类型的浏览器会"tel"回退为标准"text"输入。

<input id="telNo" type="tel">

值	表示电话号码的DOMString，或者为空
活动	改变和输入
支持的通用属性	自动完成，列表，最大长度，最小长度，模式，占位符，只读和大小
IDL属性	列表，selectionStart，selectionEnd，selectionDirection和值
方法	select（），setRangeText（），setSelectionRange（）

值

一个DOMString可以采取两个值之一：

一个空字符串（“”），表示用户没有输入值或者该值已被删除。

代表电话号码的字符串。

使用tel输入

电话号码是网上一种非常常见的数据类型 - 例如，如果您正在创建任何类型的注册或电子商务网站，您可能需要一个紧急联系人的电话号码。电话号码的问题在于，正如我们之前所说，世界各地有许多不同的电话号码格式，这就是为什么输入类型tel不会自动验证。提供“一刀切”解决方案是非常困难的，但我们将在“示例”部分中看一些想法。

注意：如果您愿意，可以添加验证，稍后我们将在“验证”部分中看到。

自定义键盘

输入类型的主要优点之一tel是，它使移动浏览器显示一个更方便的键盘输入电话号码。例如，以下是从Firefox for Android中取得的：

一个简单的电话输入

在最基本的形式中，电话输入可以这样实现：

<input id="telNo" name="telNo" type="tel">

这里没有什么不可思议的事情发生。当提交给服务器时，上面输入的数据将被表示为telNo=330-4400-6789。

占位符 Placeholders

有时，提供关于输入数据应该采取何种形式的上下文提示是有帮助的。如果页面设计不为每个页面提供描述性标签，这可能对于每一个<input>来说尤其重要。于是有了占位符。占位符是演示的形式的值value应采取通过呈现一个有效的值，这被显示在编辑框内部时，该元件的一个例子value是""。一旦数据输入框中，占位符消失; 如果该框被清空，占位符重新出现。

在这里，我们有"tel"占位符的输入"123-4567-8901"。请注意占位符在编辑字段的内容时如何消失并重新出现。

<input id="telNo" name="telNo" type="tel"
       placeholder="123-4567-8901">

控制输入大小

您不仅可以控制输入框的物理长度，还可以控制输入文本自身允许的最小和最大长度。

物理输入元素大小

输入框的物理尺寸可以使用size属性进行控制。有了它，您可以指定输入框一次可以显示的字符数。在这个例子中，例如，tel编辑框的宽度为20个字符：

<input id="telNo" name="telNo" type="tel"
       size="20">

元素值的长度

size是独立于所输入的电话号码的长度的限制。您可以使用minlength属性为输入的电话号码指定最小字符长度; 同样，maxlength用来设置输入的电话号码的最大长度。

下面的示例创建一个20个字符的电话号码输入框，要求内容不少于9个字符且不超过14个字符。

<input id="telNo" name="telNo" type="tel"
       size="20" minlength="9" maxlength="14">

注意：上述属性确实会影响验证 - 如果值的长度小于9个字符，或者大于14个字符，上述示例的输入将被视为无效。大多数浏览器甚至不会让您输入超过最大长度的值。

提供默认选项

通常，您可以为通过value属性来为输入框提供默认值：

<input id="telNo" name="telNo" type="tel"
       value="333-4444-4444">

提供建议值

再往前走一步，您可以提供一个默认选项列表，用户可以通过指定该list属性来进行选择。这不会限制用户使用这些选项，但可以让他们更快地选择常用的电话号码。这也提供了一些提示autocomplete。该list属性指定一个<datalist>元素的ID，该元素依次包含<option>每个建议值的一个元素; 每个option的value是电话号码输入框对应的建议值。

<input id="telNo" name="telNo" type="tel" list="defaultTels">

<datalist id="defaultTels">
  <option value="111-1111-1111">
  <option value="122-2222-2222">
  <option value="333-3333-3333">
  <option value="344-4444-4444">
</datalist>

使用<datalist>元素及<option>，浏览器将提供指定的值作为电子邮件地址的潜在值; 这通常以包含建议的弹出菜单或下拉菜单的形式呈现。

验证

正如我们之前谈到的那样 - 为电话号码提供一种通用的客户端验证解决方案相当困难。所以，我们能做些什么？

重要说明：HTML表单验证不能 取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

要求输入电话号码

您可以这样做，使空输入无效，并不会使用该required属性提交给服务器。例如，让我们使用这个HTML：

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): </label>
    <input id="telNo" name="telNo" type="tel" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

让我们包含下面的CSS来突出检查/交叉的有效/无效表单元素：

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

输出如下所示：

格式验证

如果要进一步限制输入的数字以使其必须符合指定的模式才是有效的，则可以使用该pattern属性，该属性将输入值必须匹配的正则表达式作为其值。

在这个例子中，我们将使用相同的CSS，但是我们的HTML将如下所示：

<form>
  <div>
    <label for="telNo">Enter a telephone number (accepted format xxx-xxx-xxxx): </label>
    <input id="telNo" name="telNo" type="tel" required
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

请注意，除非使用xxx-xxx-xxxx模式，否则输入被报告为无效。这显然只对某些语言环境有用 - 在实际的应用程序中，您可能必须根据用户的区域设置更改所使用的模式。

例子

在这个例子中，我们给出一个简单的界面，一个<select>元素允许用户选择他们所在的国家和一组<input type =“tel”>元素，允许他们输入他们的电话号码的每个部分 -没有理由为什么你不能有多个tel输入。

每个输入都有一个placeholder属性，向有视觉的用户显示要输入的内容的提示，pattern为所需的部分强制执行特定数量的字符，以及aria-label向屏幕阅读器用户提示要输入内容的提示进去。

<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>Enter your telephone number: </p>
    <span class="areaDiv">
      <input id="areaNo" name="areaNo" type="tel" required
             placeholder="Area code" pattern="[0-9]{3}"
             aria-label="Area code">
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input id="number1" name="number1" type="tel" required
             placeholder="First part" pattern="[0-9]{3}"
             aria-label="First part of number">
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input id="number2" name="number2" type="tel" required
             placeholder="Second part" pattern="[0-9]{4}"
             aria-label="Second part of number">
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

JavaScript的相对简单-它包含一个onchange事件处理程序，当<select>值改变，更新<input>元素的pattern，placeholder和aria-label适合的电话号码的格式，在该国家/地区。

var selectElem = document.querySelector("select"
var inputElems = document.querySelectorAll("input"

selectElem.onchange = function() {
  for(var i = 0; i < inputElems.length; i++) {
    inputElems[i].value = "";
  }

  if(selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label","First part of number"

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label","Second part of number"
  } else if(selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label","Local number"
  } else if(selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label","First part of number"

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label","Second part of number"
  }
}

这个例子看起来像这样：

这是一个有趣的想法，它显示了处理国际电话号码问题的潜在解决方案。你将不得不扩大这个范例来为潜在的每个国家提供正确的模式，这将是一个很大的工作，并且仍然没有万无一失的保证，用户可以正确地输入他们的号码。

它让你想知道是否值得在客户端面对所有这些麻烦，当你可以让用户在客户端输入任意格式的数字，然后在服务器端验证和消毒。但是这个选择是你自己做的。

规范

规范	状态	评论
HTML生活标准该规范中'<input type ='tel'>''的定义。	生活水平	初始定义
HTML 5.1该规范中'<input type ='tel'>''的定义。	建议	初始定义

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	10	10.62	(Yes)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	iOS WebKit (Safari/Chrome/Firefox/etc)
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	?	(Yes)	(Yes)