Question

inputmode属性在this document on the Mozilla Developer Network (MDN)中描述的任何流行浏览器中都没有效果，因为它不提供虚拟键盘。

我在这里重现了代码片段：

<html>
    <label for = "txtName">Name</label>&nbsp;<input name = "txtName" type = "text" inputmode = "text" /><br />
    <label for = "txtAge">Age</label>&nbsp;<input name = "txtAge" type = "text" inputmode = "numeric" /><br />
    <label for = "txtEmail">Email</label>&nbsp;<input name = "txtEmail" type = "text" inputmode = "email" /><br />
    <label for = "txtUrl">Url</label>&nbsp;<input name = "txtUrl" type = "text" inputmode = "url" /><br />
    <label for = "txtPhoneNumber">Phone Number</label>&nbsp;<input name = "txtPhoneNumber" type = "text" inputmode = "tel" /><br />
</html>

我错过了什么吗？

Answer 1

根据caniuse.com，默认情况下，在任何主流浏览器中都不支持此功能。所以今天它没有任何效果。看起来支持即将到来 - Firefox有一个启用它的标志，Chrome在开发中标记了＃34;而Edge正在考虑＆＃34;正在考虑＆＃34;。

Answer 2

我相信这只适用于手机选择要显示的键盘类型。

正如this文章所述：inputmode属性告诉浏览器在具有动态键盘的设备上显示哪个键盘。 inputmode属性适用于文本，搜索和密码输入类型以及。此属性仅与具有动态键盘的设备上的浏览器相关。

Answer 3

此属性仅适用于具有动态键盘的设备上的浏览器。

＆＃34; INPUTMODE＆＃34;只是提示浏览器显示哪个虚拟键盘，它不会启用虚拟键盘。在触摸屏手机和笔记本电脑上，它应该工作并显示正确的键盘（在大多数设备上，并非所有设备都保证）而对于其他PC，您可以尝试一些虚拟键盘扩展，例如Google Input Tools，但不能保证它不起作用也用于电话，电子邮件和网址

<input type="tel">
<input type="email">
<input type="url">

在各种设备和浏览器上获得更好的支持。

为什么输入元素的inputmode属性不像MDN文档所描述的那样使用虚拟键盘？

3 个答案: