哈Ha！ 我向您介绍克里斯蒂安·奥利夫
（ Christian Oliff）的文章
“您想要了解的有关输入模式的所有内容” 。
译者注：“关于输入模式的所有您想了解的内容”的原始标题已更改为“用于移动操作系统和浏览器的输入模式属性的功能”，因为第二个内容更准确地传达了其实质。
全局inputmode属性告诉使用屏幕键盘的设备的浏览器，当用户选择输入或textarea元素时显示哪个选项。
<input type="text" inputmode="" /> <textarea inputmode="" />
与更改表单的类型不同，inputmode不会更改浏览器解释输入的方式-它向浏览器提供在哪个键盘上显示指令。
inputmode属性由来已久，但直到最近才被领先的移动浏览器采用：iOS的Safari和Android的Chrome。 以前，它是在2012年在Android的Firefox中实现的，但是几个月后，它被删除了（尽管仍然可以通过该标志使用）。 在将近六年之后，Chrome浏览器（Android版）建立了此属性，并且在最新版本的iOS 12.2中，Safari也支持该属性。
浏览器属性支持可在
此处查看。 数字表示浏览器版本。
在开始了解底线之前，我们应该记住WHATWG生存标准提供了输入模式文档，而W3C 5.2规范不再包含它。 由于WHATWG记录了该属性，并且浏览器正在努力支持该属性，因此我们将WHATWG的技术特征作为标准。
Inputmode具有多个值。 让我们一次看看他们。
＃无
<input type="text" inputmode="none" />
让我们开始吧，因为也许我们不需要任何键盘。 使用inputmode =“ none”将不会在Android版Chrome浏览器中显示键盘。 默认情况下，iOS 12.2将显示其字母数字键盘，因此在这种情况下，该特性可能不会像iOS一样重设。
＃数字
<input type="text" inputmode="numeric" />
这可能是最常见的输入模式值之一，因为它是仅需要数字的输入字段的理想选择，例如，PIN码，邮政编码，信用卡号等。 与将输入切换为类型=“数字”相比，使用数字类型为“文本”的数字更有意义，因为inputmode =“数字”可以与maxlength，minlength和pattern属性一起使用，从而使其在不同场合具有更多用途。
我经常看到网站使用外语类型=“ tel”来显示数字键盘。 这被认为是一种解决方法，但是在语义上是不正确的。
请记住，inputmode支持pattern属性，我们可以在输入中添加pattern =“ \ d *”以达到相同的效果。 如果您确定输入只允许输入数字，请使用此选项，因为Android（与iOS不同）不允许用户使用字母访问键盘，这可能会意外干扰输入有效数据。
＃电话
<input type="text" inputmode="tel" />
使用标准的字母数字键盘输入电话号码可能很困难。 在电话键盘上，每个带有数字的按钮（1和0除外）代表位于同一键上的三个字母（例如2代表A，B和C）。 字母数字键盘不引用这些字母，因此解码包含字母的电话号码（例如1-800-COLLECT）需要额外的资源。
使用inputmode和tel切换显示一个标准的电话键盘，包括用于0到9的数字的按钮，井号和星号。 另外，我们将使用字母助记符（例如ABC）。
＃十进制
<input type="text" inputmode="decimal" />
在iOS上，将inputmode字段切换为十进制会导致一些小的变化，其中键盘的外观与tel相同，但是符号+ *＃被小数点代替。 Android只会使用数字键盘。
＃电子邮件
<input type="text" inputmode="email" />
我确定您填写了一个要求输入电子邮件地址的表格，这迫使键盘仅切换以访问@符号。 这不是致命的，但肯定不太方便。 这是电子邮件值派上用场的地方。 它添加@符号和小数点。
这样的键盘对于需要在Twitter上输入用户名的用户很有用，因为@是识别此社交网络中用户的主要字符。 使用的另一个原因可能是，如果您拥有自己的用于检查电子邮件的脚本，并且不想使用浏览器中内置的验证功能。
#URL
<input type="text" inputmode="url" />
URL值使通过按一个按钮添加域名扩展名（例如.com）最容易。 还有一些通常用于网址的按钮，例如字符（。）和（/）。 键盘上显示的扩展名已添加到用户条目中。
这样的键盘有助于向用户显示您的输入字段接受域名（site.com）以及标准域名（https://site.com）。
如果您的输入字段需要验证输入的字符，请使用type =“ url”。
＃搜索
<input type="text" inputmode="search" />
此值在iOS上显示蓝色的Go按钮，在Android上显示绿色的Enter，都代替Return。 正如您可能已经猜到的那样，搜索用于搜索表单，它提供了生成查询的键。
如果要在iOS中显示“搜索”而不是Enter，在Android上显示放大镜图标而不是绿色箭头，请使用type =“ search”。
＃您还需要知道什么
- Android上基于铬的浏览器（例如Microsoft Edge，Brave和Opera）具有与Chrome相同的输入模式行为。
- 为了简洁起见，我没有触摸iPad上的键盘。 它们类似于iPhone，只包含更多按钮。 Android平板电脑也是如此，但第三方键盘除外，这可能是一个值得强调的单独主题。
- 最初，建议的规范具有日语输入的假名和片假名含义，但是它们从未在任何浏览器中实现，因此已停产。
- 拉丁名最初也是输入模式值之一，因此被删除。 有趣的是，如果您现在在iOS Safari中使用它，它将在键盘上方显示用户名。