HTML inputmode 属性

inputmode 属性是 HTML5 新增的属性，在输入数据时可以提示浏览器使用特定输入模式，目的是提高输入效率和准确度。在移动设备上特别实用。

语法

<input inputmode="text|none|tel|url|email|numeric|decimal|search">

可选值

• text：默认值，文本输入模式，适用于常规文本输入。
• none：禁用键盘。
• tel：电话号码输入模式，用于输入电话号码、智能电话号码和传真号码。
• url：URL 地址输入模式，用于输入 URL 和电子邮件地址。
• email：电子邮件地址输入模式，用于输入电子邮件地址和邮件列表。
• numeric：数字输入模式，用于输入数字。
• decimal：数字带有小数点输入模式，用于输入带小数的数字。
• search：搜索文本输入模式，用于输入搜索条件。

示例

<!-- 输入电话号码类型 -->
<label for="tel-input">请输入电话号码:</label>
<input type="tel" inputmode="tel" id="tel-input" />

<!-- 输入数字类型 -->
<label for="number-input">请输入一个数字:</label>
<input type="number" inputmode="numeric" id="number-input" />

<!-- 输入小数类型 -->
<label for="decimal-input">请输入一个带有小数点的数字:</label>
<input type="number" inputmode="decimal" id="decimal-input" />

<!-- 输入搜索关键词类型 -->
<label for="search-input">请输入搜索关键词:</label>
<input type="text" inputmode="search" id="search-input" />

浏览器支持

目前 inputmode 属性在主流浏览器中已经得到支持，如下：

• Chrome
• Firefox
• Safari
• Opera
• Edge

不过，部分浏览器可能会选择不支持某些输入类型或输入模式。因此，在使用时需要谨慎考虑兼容性问题。

注意事项

• inputmode 属性不能用于 <textarea> 标签上。
• 使用 inputmode 属性时，除非特别需要，应当根据实际情况使用默认值，避免过度还原。
• 输入模式并不一定直接对应键盘布局，这取决于浏览器和操作系统的支持情况。