input的inputmode属性调用手机软键盘

input的inputmode属性调用手机软键盘

什么是inputmode?

inputmode 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。它可以是以下值：

• "none"

  无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

• "text"

  使用用户本地区域设置的标准文本输入键盘。

• "decimal"

  小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。

• "numeric"

  数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。

• "tel"

  电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用。

• "search"

  为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。

• "email"

  为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 。

• "url"

  为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。

如果没有设置这个属性，它的默认值是 "text"，表明使用本地的标准文本输入键盘。

使用效果

代码：

<style>
    .layout-container {
        display: flex;
        flex-direction: column;
    }
    input {
        height: 20px;
    }
</style>

<div class="layout-container">
    <h1>inputmode属性</h1>
    <label for="inputmodenone">none:</label>
    <input id="inputmodenone" inputmode="none" />
    <label for="inputmodetext">text:</label>
    <input id="inputmodetext" inputmode="text" />
    <label for="inputmodedecimal">decimal:</label>
    <input id="inputmodedecimal" inputmode="decimal" />
    <label for="inputmodenumeric">numeric:</label>
    <input id="inputmodenumeric" inputmode="numeric" />
    <label for="inputmodetel">tel:</label>
    <input id="inputmodetel" inputmode="tel" />
    <label for="inputmodesearch">search:</label>
    <input id="inputmodesearch" inputmode="search" />
    <label for="inputmodeemail">email:</label>
    <input id="inputmodeemail" inputmode="email" />
    <label for="inputmodeurl">url:</label>
    <input id="inputmodeurl" inputmode="url" />
</div>

在线效果（建议真机访问）：http://139.159.248.231:8083/

效果图（小米10）

inputmode=“none”

inputmode=“text”

inputmode=“decimal”

inputmode=“numeric”

inputmode=“tel”

inputmode=“search”

inputmode=“email”

inputmode=“url”