提升移動設(shè)備應(yīng)用性能的一個簡單實(shí)用方法：始終使用正確的type、inputmode和autocomplete屬性配置HTML輸入字段。雖然這三個屬性經(jīng)常被單獨(dú)討論，但當(dāng)您將它們視為一個整體時(shí)，它們在移動用戶體驗(yàn)中的意義最為重大。

眾所周知，移動設(shè)備上的表單填寫耗時(shí)且繁瑣，但通過正確配置輸入字段，我們可以確保數(shù)據(jù)輸入過程對用戶盡可能流暢。讓我們來看一些示例和最佳實(shí)踐，以創(chuàng)建更好的移動設(shè)備用戶體驗(yàn)。

使用正確的輸入類型

這是最容易做對的事情。諸如email、tel和url之類的輸入類型在各種瀏覽器中都得到了很好的支持。雖然在桌面瀏覽器上使用tel類型而不是更通用的text類型的好處可能難以察覺，但在移動設(shè)備上則一目了然。

選擇合適的類型會改變用戶在Android和iOS設(shè)備上聚焦字段時(shí)彈出的鍵盤。只需付出很少的努力，只需使用正確的類型，我們就可以為電子郵件、電話號碼、URL甚至搜索輸入顯示自定義鍵盤。

需要注意的是，input type="email"和input type="url"都具有驗(yàn)證功能，當(dāng)用戶提交表單時(shí)，現(xiàn)代瀏覽器會在其值與預(yù)期格式不匹配時(shí)顯示錯誤提示。如果您想關(guān)閉此功能，只需向包含表單添加novalidate屬性即可。

日期類型的簡要介紹

HTML輸入不僅僅包括專門的文本輸入——還包括單選按鈕、復(fù)選框等等。然而，就本文討論的目的而言，我主要討論的是更基于文本的輸入。

有一種輸入類型位于更自由的文本輸入和單選按鈕等輸入小部件之間的臨界空間：日期。日期輸入類型有多種變體，在移動設(shè)備上得到很好的支持，包括date、time、datetime-local和month。當(dāng)它們被聚焦時(shí)，這些會在iOS和Android中彈出自定義小部件。它們不會觸發(fā)專門的鍵盤，而是在iOS中顯示類似選擇的界面，在Android上顯示各種不同類型的小部件（其中日期和時(shí)間選擇器特別流暢）。

我一開始很興奮能夠在移動設(shè)備上使用原生默認(rèn)設(shè)置，直到我環(huán)顧四周，意識到大多數(shù)主要的應(yīng)用程序和移動網(wǎng)站都使用自定義日期選擇器而不是原生的日期輸入類型。這可能有幾個原因。首先，我發(fā)現(xiàn)原生的iOS日期選擇器不如日歷類型的小部件直觀。其次，即使是設(shè)計(jì)精美的Android實(shí)現(xiàn)與自定義組件相比也相當(dāng)有限——例如，沒有簡單的方法可以輸入日期范圍而不是單個日期。

盡管如此，如果使用的自定義日期選擇器在移動設(shè)備上的性能不佳，那么日期輸入類型還是值得嘗試的。如果您想在iOS和Android上嘗試原生輸入小部件，同時(shí)確保桌面用戶看到自定義小部件而不是默認(rèn)的下拉菜單，這段CSS代碼可以隱藏實(shí)現(xiàn)它的桌面瀏覽器的日歷下拉菜單：

::-webkit-calendar-picker-indicator {
  display: none;
}

最后需要注意的是，日期類型不能被我們將要討論的inputmode屬性覆蓋。

為什么我應(yīng)該關(guān)心inputmode？

inputmode屬性允許您覆蓋輸入類型指定的移動鍵盤，并直接聲明顯示給用戶的鍵盤類型。當(dāng)我第一次了解這個屬性時(shí)，我并沒有留下深刻印象——為什么不一開始就使用正確的類型呢？但是，雖然inputmode通常是不必要的，但在一些地方它可以非常有用。我發(fā)現(xiàn)inputmode最顯著的用例是構(gòu)建更好的數(shù)字輸入。

雖然一些HTML5輸入類型，如url和email，很簡單，但input type="number"則有所不同。它有一些可訪問性問題，以及一個有點(diǎn)尷尬的UI。例如，桌面瀏覽器（如Chrome）會顯示很小的增量箭頭，很容易在滾動時(shí)意外觸發(fā)。

所以這是一個需要記住并在以后使用的模式。對于大多數(shù)數(shù)字輸入，不要使用這個：

<input type="number">

…你實(shí)際上想要使用這個：

<input type="text" inputmode="decimal">

為什么不使用inputmode="numeric"而不是inputmode="decimal"？

numeric和decimal屬性值在Android上產(chǎn)生相同的鍵盤。然而，在iOS上，numeric顯示一個同時(shí)顯示數(shù)字和標(biāo)點(diǎn)的鍵盤，而decimal顯示一個專注的數(shù)字網(wǎng)格，幾乎與tel輸入類型完全相同，只是沒有多余的電話號碼相關(guān)選項(xiàng)。這就是為什么它是我對大多數(shù)類型數(shù)字輸入的首選。

Christian Oliff撰寫了一篇優(yōu)秀的文章，專門介紹inputmode屬性。

不要忘記autocomplete

比顯示正確的移動鍵盤更重要的是顯示有用的自動完成建議。這對于在移動設(shè)備上創(chuàng)建更快、更流暢的用戶體驗(yàn)大有幫助。

雖然瀏覽器有顯示自動完成字段的啟發(fā)式方法，但您不能依賴它們，并且仍然應(yīng)該確保添加正確的autocomplete屬性。例如，在iOS Safari中，我發(fā)現(xiàn)input type="tel"只有在我顯式添加autocomplete="tel"屬性時(shí)才會顯示自動完成選項(xiàng)。

您可能認(rèn)為您熟悉基本的自動完成選項(xiàng)，例如幫助用戶填寫信用卡號碼或地址表單字段的選項(xiàng)，但我建議您查看它們，以確保您了解所有選項(xiàng)。規(guī)范列出了超過50個值！您知道autocomplete="one-time-code"可以使電話驗(yàn)證用戶流程非常流暢嗎？

關(guān)于autocomplete…

我想提一下另一個允許您創(chuàng)建自己的自定義自動完成功能的元素：datalist。雖然它在桌面Chrome和Safari上創(chuàng)建了一種可用的——盡管有點(diǎn)基本——的自動完成體驗(yàn)，但它在iOS上通過在鍵盤正上方方便的行中顯示建議而脫穎而出，系統(tǒng)自動完成功能通常位于該位置。此外，它允許用戶在文本和選擇式輸入之間切換。

另一方面，在Android上，datalist創(chuàng)建了一個更典型的自動完成下拉菜單，鍵盤上方的區(qū)域保留用于系統(tǒng)自己的類型化功能。（在iOS中，為了查看前三名匹配項(xiàng)以外的內(nèi)容，用戶必須通過按下向下箭頭圖標(biāo)來觸發(fā)選擇選擇器。）

您可以使用此演示來試用datalist：

您可以使用我制作的這個工具來探索所有autocomplete選項(xiàng)以及inputtype和inputmode值，以幫助您快速預(yù)覽移動設(shè)備上的各種輸入配置。

總結(jié)

當(dāng)我構(gòu)建表單時(shí)，我經(jīng)常傾向于專注于完善桌面體驗(yàn)，而將移動網(wǎng)絡(luò)視為事后考慮。但是，雖然確保表單在移動設(shè)備上運(yùn)行良好確實(shí)需要一些額外的工作，但這并不一定很困難。希望本文已經(jīng)表明，通過幾個簡單的步驟，您可以使移動設(shè)備上的表單對用戶更方便。

以上是更好的形式輸入，以提供更好的移動用戶體驗(yàn)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！