移动端H5页面在input输入框获得焦点时禁止唤起键盘

这篇具有很好参考价值的文章主要介绍了移动端H5页面在input输入框获得焦点时禁止唤起键盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

移动端

实现效果:
当input输入框获得焦点时,在保留光标的情况下,又不让手机虚拟键盘弹起
问题背景:
哈哈哈哈 我又来了,又是java安卓应用嵌入H5页面,给大家看下效果
input禁止弹出键盘,移动端实用笔记,javascript,前端,开发语言
点击开始时间或者结束时间时会弹出日期选择器,这个时候呢在手机上看的话,会同时触发键盘,导致键盘弹出来,在网上找了半天终于找到了一个满足我业务需求的解决办法
我用的是原生html+jquery写的,实现方法如下:

<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript">
 function stopKeyborad(obj) {
     obj.attr('readonly', 'readonly');
     setTimeout(function () {
         obj.removeAttr('readonly');
     }, 200);
 }
</script>

如果是vue写的用下边的方法:

<input type="password"   @focus="stopKeyborad">
stopKeyborad () {
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

写完之后就不会再唤醒手机键盘了!文章来源地址https://www.toymoban.com/news/detail-603553.html

到了这里,关于移动端H5页面在input输入框获得焦点时禁止唤起键盘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • elementui表格插槽使用的input输入框,添加键盘快捷键上下左右箭头,获取焦点

    给表格行、列赋值index;获取表格的总列数 在el-table 添加 :cell-class-name=\\\"tableRowClassName\\\" 当某个单元格被点击时 获取行列 触发及键盘事件 @cell-click=\\\"handleCellClick\\\" 给input赋值id

    2024年02月02日
    浏览(50)
  • H5: div与textarea输入框的交互(聚焦、失去焦点、键盘收起)

    本文是基于 VUE3+TS 的代码说明。 记录自己遇到的 div 与 textarea 输入框交互的聚焦、失去焦点、键盘收起、表情插入不失去焦点的需求实现。 1.固定在页面底部; 2.默认显示纯文字与发送图标按钮,文字超出的省略显示; 3.点击文字后,显示文本输入框、表情、半透明遮罩层,

    2024年02月12日
    浏览(47)
  • uni-app写微信小程序input获取焦点部分安卓机页面不弹起问题(弹起一点焦点样式问题)

    以上代码是一个自己封装的一个输入框组建 以上是问题出现的关键,没有设置行高 设置行高后就解决了问题,具体原因不详

    2024年02月11日
    浏览(48)
  • 在微信小程序使用fixed布局固定input 输入框,iPhone ios系统无法获取焦点问题解决。

    问题 微信小程序 是fixed布局后 ios版本 input 输入框 无法选中 但是长按可以获取焦点 。 解决 查看微信小程序开发文档 对input的介绍 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 发现了 always-embed 属性 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在

    2024年02月12日
    浏览(56)
  • 页面上input输入框宽度实现自动调整

       input输入框宽度实现自动调整,本文介绍两种方式,一是通过获取input 内容的宽度 实现输入框宽度的自动调整;二是通过内容字符串的长度乘以文本字体大小的积,来实现输入框宽度的自动调整。 1、input输入框宽度的获取方式一    由于input输入框中text文本的实际宽度

    2024年02月14日
    浏览(38)
  • 移动端H5页面的缓存问题

    一、前端页面缓存问题 前端页面缓存问题是指页面的静态资源(如图片、JS 和 CSS 文件)在浏览器中被缓存后,导致页面不能正确地更新或者加载最新的内容。 为了解决这个问题,我们可以采用一些缓存控制策略来解决。 使用 HTTP 缓存头控制缓存: 可以使用 HTTP 头中的 \\\"Cac

    2024年02月12日
    浏览(52)
  • 移动端h5页面微信一键登录

    在移动端的 H5 页面中,微信一键登录是一种常见的方式,可以方便地让用户使用已有的微信账号进行登录,并且提高用户的使用效率和体验。具体实现方法如下: 前端 code 获取到的数据需要传给后端进行验证,获取 openid 和 access_token。可以使用 urllib 库向微信服务器发送请求

    2024年02月12日
    浏览(40)
  • 小程序底部input输入框,键盘弹起时页面整体上移问题解决

    存在问题: 小程序中,当input输入框位于页面底部时,输入框聚焦后键盘弹起,页面会整体上移,将输入框所在位置定位到键盘上方(图2) 解决思路: 键盘弹起时,页面其他元素不动不动,底部输入框跟随键盘上弹(图3) 效果图对比: 1、input设置属性 :adjust-position=“fal

    2024年02月11日
    浏览(56)
  • 使用Vant搭建的H5页面移动端无法上传图片问题

    具体的原因是因为在van-uploader组件中加了一个属性multiple所导致的,这里我们可以去看一下Vant的官网给出了答案如下图: 第一个是accept你需要去做相应的文件处理,如果你加了不去处理也会导致出现移动端上传图片失败, 第二个是multiple 官方文档上给出了详细解释,我使用安

    2024年02月12日
    浏览(48)
  • h5移动端页面调试工具Chii与 weinre 一样的远程调试工具

    与 weinre 一样的远程调试工具,主要是将 web inspector 替换为最新的 chrome devtools frontend. 电脑上跑一个chii服务,把对应的js嵌入h5页面内,用手机访问h5页面,chrome内看chii服务地址即可找到对应管理控制台     可以通过 npm 安装。   用下面的命令开启服务。   在你的页面中使

    2024年02月08日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包