"tel"類型的<input>元素  用于讓用戶輸入電話號碼。與<input type =“email”>和<input type =“url”>不同，在提交表單之前，輸入值不會(huì)被自動(dòng)驗(yàn)證為特定的格式 - 這是因?yàn)殡娫捥柎a的格式在世界各地變化很大。

不支持類型的瀏覽器會(huì)"tel"回退為標(biāo)準(zhǔn)"text"輸入。

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

值

一個(gè)DOMString可以采取兩個(gè)值之一：

1. 一個(gè)空字符串（“”），表示用戶沒有輸入值或者該值已被刪除。

1. 代表電話號碼的字符串。

使用tel輸入

電話號碼是網(wǎng)上一種非常常見的數(shù)據(jù)類型 - 例如，如果您正在創(chuàng)建任何類型的注冊或電子商務(wù)網(wǎng)站，您可能需要一個(gè)緊急聯(lián)系人的電話號碼。電話號碼的問題在于，正如我們之前所說，世界各地有許多不同的電話號碼格式，這就是為什么輸入類型tel不會(huì)自動(dòng)驗(yàn)證。提供“一刀切”解決方案是非常困難的，但我們將在“示例”部分中看一些想法。

注意：如果您愿意，可以添加驗(yàn)證，稍后我們將在“驗(yàn)證”部分中看到。

自定義鍵盤

輸入類型的主要優(yōu)點(diǎn)之一tel是，它使移動(dòng)瀏覽器顯示一個(gè)更方便的鍵盤輸入電話號碼。例如，以下是從Firefox for Android中取得的：

一個(gè)簡單的電話輸入

在最基本的形式中，電話輸入可以這樣實(shí)現(xiàn)：

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

這里沒有什么不可思議的事情發(fā)生。當(dāng)提交給服務(wù)器時(shí)，上面輸入的數(shù)據(jù)將被表示為telNo=330-4400-6789。

占位符 Placeholders

有時(shí)，提供關(guān)于輸入數(shù)據(jù)應(yīng)該采取何種形式的上下文提示是有幫助的。如果頁面設(shè)計(jì)不為每個(gè)頁面提供描述性標(biāo)簽，這可能對于每一個(gè)<input>來說尤其重要。于是有了占位符。占位符是演示的形式的值value應(yīng)采取通過呈現(xiàn)一個(gè)有效的值，這被顯示在編輯框內(nèi)部時(shí)，該元件的一個(gè)例子value是""。一旦數(shù)據(jù)輸入框中，占位符消失; 如果該框被清空，占位符重新出現(xiàn)。

在這里，我們有"tel"占位符的輸入"123-4567-8901"。請注意占位符在編輯字段的內(nèi)容時(shí)如何消失并重新出現(xiàn)。

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

控制輸入大小

您不僅可以控制輸入框的物理長度，還可以控制輸入文本自身允許的最小和最大長度。

物理輸入元素大小

輸入框的物理尺寸可以使用size屬性進(jìn)行控制。有了它，您可以指定輸入框一次可以顯示的字符數(shù)。在這個(gè)例子中，例如，tel編輯框的寬度為20個(gè)字符：

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

元素值的長度

size是獨(dú)立于所輸入的電話號碼的長度的限制。您可以使用minlength屬性為輸入的電話號碼指定最小字符長度; 同樣，maxlength用來設(shè)置輸入的電話號碼的最大長度。

下面的示例創(chuàng)建一個(gè)20個(gè)字符的電話號碼輸入框，要求內(nèi)容不少于9個(gè)字符且不超過14個(gè)字符。

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

注意：上述屬性確實(shí)會(huì)影響驗(yàn)證 - 如果值的長度小于9個(gè)字符，或者大于14個(gè)字符，上述示例的輸入將被視為無效。大多數(shù)瀏覽器甚至不會(huì)讓您輸入超過最大長度的值。

提供默認(rèn)選項(xiàng)

通常，您可以為通過value屬性來為輸入框提供默認(rèn)值：

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

提供建議值

再往前走一步，您可以提供一個(gè)默認(rèn)選項(xiàng)列表，用戶可以通過指定該list屬性來進(jìn)行選擇。這不會(huì)限制用戶使用這些選項(xiàng)，但可以讓他們更快地選擇常用的電話號碼。這也提供了一些提示autocomplete。該list屬性指定一個(gè)<datalist>元素的ID，該元素依次包含<option>每個(gè)建議值的一個(gè)元素; 每個(gè)option的value是電話號碼輸入框?qū)?yīng)的建議值。

<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>，瀏覽器將提供指定的值作為電子郵件地址的潛在值; 這通常以包含建議的彈出菜單或下拉菜單的形式呈現(xiàn)。

雖然具體的用戶體驗(yàn)可能因?yàn)g覽器而異，但通常在編輯框中單擊可顯示建議電子郵件地址的下拉列表。然后，當(dāng)用戶鍵入時(shí)，該列表被調(diào)整以僅顯示過濾的匹配值。每個(gè)輸入的字符都會(huì)縮小列表直到用戶進(jìn)行選擇或輸入自定義值。

驗(yàn)證

正如我們之前談到的那樣 - 為電話號碼提供一種通用的客戶端驗(yàn)證解決方案相當(dāng)困難。所以，我們能做些什么？

重要說明：HTML表單驗(yàn)證不能 取代服務(wù)器端腳本，以在被允許進(jìn)入數(shù)據(jù)庫之前確保輸入的數(shù)據(jù)格式正確。有人很容易調(diào)整HTML，使他們繞過驗(yàn)證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗(yàn)證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯(cuò)誤等等）輸入到您的數(shù)據(jù)庫時(shí)，可能會(huì)導(dǎo)致災(zāi)難。

要求輸入電話號碼

您可以這樣做，使空輸入無效，并不會(huì)使用該required屬性提交給服務(wù)器。例如，讓我們使用這個(gè)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;}

輸出如下所示：

格式驗(yàn)證

如果要進(jìn)一步限制輸入的數(shù)字以使其必須符合指定的模式才是有效的，則可以使用該pattern屬性，該屬性將輸入值必須匹配的正則表達(dá)式作為其值。

在這個(gè)例子中，我們將使用相同的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模式，否則輸入被報(bào)告為無效。這顯然只對某些語言環(huán)境有用 - 在實(shí)際的應(yīng)用程序中，您可能必須根據(jù)用戶的區(qū)域設(shè)置更改所使用的模式。

例子

在這個(gè)例子中，我們給出一個(gè)簡單的界面，一個(gè)<select>元素允許用戶選擇他們所在的國家和一組<input type =“tel”>元素，允許他們輸入他們的電話號碼的每個(gè)部分 -沒有理由為什么你不能有多個(gè)tel輸入。

每個(gè)輸入都有一個(gè)placeholder屬性，向有視覺的用戶顯示要輸入的內(nèi)容的提示，pattern為所需的部分強(qiáng)制執(zhí)行特定數(shù)量的字符，以及aria-label向屏幕閱讀器用戶提示要輸入內(nèi)容的提示進(jìn)去。

<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的相對簡單-它包含一個(gè)onchange事件處理程序，當(dāng)<select>值改變，更新<input>元素的pattern，placeholder和aria-label適合的電話號碼的格式，在該國家/地區(qū)。

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");  }}

這個(gè)例子看起來像這樣：

這是一個(gè)有趣的想法，它顯示了處理國際電話號碼問題的潛在解決方案。你將不得不擴(kuò)大這個(gè)范例來為潛在的每個(gè)國家提供正確的模式，這將是一個(gè)很大的工作，并且仍然沒有萬無一失的保證，用戶可以正確地輸入他們的號碼。

它讓你想知道是否值得在客戶端面對所有這些麻煩，當(dāng)你可以讓用戶在客戶端輸入任意格式的數(shù)字，然后在服務(wù)器端驗(yàn)證和消毒。但是這個(gè)選擇是你自己做的。

規(guī)范

瀏覽器兼容性