使用inputmode改变移动端键盘弹出的类型

这篇具有很好参考价值的文章主要介绍了使用inputmode改变移动端键盘弹出的类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

使用原因:需求是同时兼容移动端和PC端的输入,输入框数量多且绑定不同的对象,原本考虑使用vantUI的数字键盘,但是实际使用起来问题比较多,偶然间发现了inputmode这个属性,它可以改变移动端唤起拟态键盘的方式。

可以直接查看官网说明

提示:以下是本篇文章正文内容,下面案例可供参考

一、inputmode是什么?

inputmode是一个HTML全局属性(全局属性对所有 HTML 元素都是通用的),它提供了用户在编辑元素或其内容时可能输入的数据类型,即它可以帮助具有键盘的浏览器或设备,在可输入元素获取焦点时决定显示那种虚拟键盘。

二、它有那些属性

2.1 none

当值为none的时候,不会唤起键盘。这用于浏览器或任何应用程序自行处理虚拟键盘的情况。

2.2 text(默认值)

标准键盘

2.3 numeric

当值为numeric的时候,键盘上应显示从 0 到 9 的数字。 “减号”键可能显示也可能不显示。

2.4 decimal

当值为decimal的时候,键盘上必须显示十进制分隔符(“.” 或 “,”)以及从 0 到 9 的数字。 “减号”键可能显示也可能不显示。

2.5 tel

当值为tel的时候,键盘上应显示数字 以及井号 () 和星号 () 键。这用于输入电话号码。

2.6 search

当值为search的时候, 键盘上应具有便于搜索的布局,这样的布局具有标记为 “Search” 或任何搜索图标或类似图标的 “Enter” 键。

2.7 email

当值为email的时候,键盘必须显示 “@” 字符,这将方便用户输入电子邮件。

2.8 url

当值为url的时候,键盘必须显示 “/” 字符,这将有助于用户输入 URL。

三、需要注意

WHATWG(超文本应用技术工作组) 规范中列出了 inputmode, 并且现代浏览器正在努力支持它。但 W3C HTML 5.2 规范 不再将其列出(也就是说将其标记为过时的)。在达成共识之前,你应该认为 WHATWG 规范定义的就是正确的。

即使是同一部手机使用不同的输入法也会导致唤起的键盘有差异

四、兼容

文章来源地址https://www.toymoban.com/news/detail-594693.html

到了这里,关于使用inputmode改变移动端键盘弹出的类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue弹出的添加信息组件中 el-radio 单选框无法点击问题

    情景描述: 在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换 原因如下: 单选框要求有个默认值,因为添加和更新操作复用同一个组件,所以我在初始化时对相关进行了判定,如果为空则赋初始值 结果这样虽然实现了初始值的展示,但是就是如此造成了单选

    2024年04月10日
    浏览(54)
  • win10/win11程序窗口最小化后, 点击任务栏无法弹出的问题处理

    在本人使用win10、win11系统时,有时打开某个程序的多个窗口,最小化该程序窗口后,长时间不对该窗口做任何操作。 在较长时间后,点击任务栏,发现无法弹出该程序窗口,但是在任务栏上 右键 点击该窗口图标,选择 关闭窗口 可以正常关闭该窗口,说明程序未卡死、 这种

    2024年02月16日
    浏览(59)
  • 在访问一个网页时弹出的浏览器窗口,如何用selenium 网页自动化解决?

    相信大家在使用selenium做网页自动化时,会遇到如下这样的一个场景: 在你使用get访问某一个网址时,会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而,很不幸,Alert类处理的结果就是没有结果,并不能够将这个弹出框关闭掉。 无法用处理alert的

    2024年02月10日
    浏览(50)
  • selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

    相信大家在使用selenium做网页自动化时,会遇到如下这样的一个场景: 在你使用get访问某一个网址时,会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而,很不幸,Alert类处理的结果就是没有结果,并不能够将这个弹出框关闭掉。 无法用处理alert的

    2024年02月07日
    浏览(49)
  • Android 13 WRITE_EXTERNAL_STORAGE , READ_EXTERNAL_STORAGE不弹出的问题

    在Android 13(API 33)之前,加入了如下代码 如果 compileSdk 设置 32 或者以下,那么就没什么问题。当设置33 或者以上,系统就会自动设置无权限。那在 33 及以上的怎么设置呢? 看下面的代码。 在xml中如下设置 动态获取权限的代码如下:

    2024年04月27日
    浏览(63)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(73)
  • echarts中饼图的tooltip根据鼠标位置改变弹出位置

    echarts中的tooltip.position属性配置参考  echarts配置手册 问题:使用echarts绘制饼图,tooltip的弹出位置会遮挡住图表。 需求:tooltip的弹出位置在饼图外圈,不遮挡图表内容,切根据鼠标的位置而改变。 解决方法:在tooltip的配置项中对position进行配置,使用回调函数实现tooltip弹

    2024年02月08日
    浏览(57)
  • 通过机器人和元宇宙"拓展人类触角"——现代汽车在CES 2022上分享了新的元移动概念...

    现代汽车将以\\\"扩大人类范围\\\"为主题,分享其在现实世界和元界中对机器人技术的愿景,以实现无限的移动自由。 公司将开创新的\\\"元移动(Metamobility)\\\"概念,通过机器人和元宇宙超越物理运动,影响现实世界的变化。 随着人工智能和自动驾驶等机器人技术的扩展,未来移动

    2024年02月07日
    浏览(43)
  • Element ui | popover弹出框改变背景色和小三角形颜色

    初始状态: 最终效果: 如果是vue项目,不能在xxx.vue文件中更改css,而是在被main.js引入的scss或css文件中更改: 注意:在实际项目中,记得给el-popover添加新类名,css使用交际选择器,以免作用在其他元素上:

    2024年02月11日
    浏览(55)
  • mac电脑使用普通键盘截图,全选,拷贝(复制),移动文件的快捷键是什么?

    为什么会有这么一个问题呢?最近接触到一个用户的imac电脑,但是他这个苹果一体机使用的是一个普通的键盘,就是用的是windows系统的键盘,我因为平时都是mac笔记本,接触的都是苹果电脑的键盘,这一下子给我弄不会了,网上搜索也找不到合适的答案,于是我经过实践,

    2024年02月09日
    浏览(98)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包