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/