H5移动端页面点击input重复弹出键盘的实现方法

本文主要和大家分享h5移动端页面加入canvas可滑动代码条件下android手机点击input重复弹出键盘,在移动端页面使用canvas的动画,为了实现动画的触摸滑动,会加入createjs.touch.enable(stage, true, false)这条语句,但加入这条语句后,页面的input和click等可点击事件都会失效,所以会用触摸事件来实现相关功能,如下:

$('#button').on('touchstart', function() {    window.location.href = 'xx.html'})

登录后复制

触摸事件控制焦点的获取来使input键盘弹出:

$('#input').on('touchstart', function() {    $(this).focus()})

登录后复制

然而苹果手机键盘关闭后input焦点自动失去,再次点击键盘弹出无异常,安卓手机键盘关闭input还是获取焦点状态,故键盘无法重复弹出。本想在关闭键盘的事件上加个失去焦点的行为,但查过资料无法找到这个事件,所以另辟奇径,找到了另一种办法:每次点击input都会删除原来的input并且生成新的input放在这里,这样新的input又可以获取焦点并弹出键盘了,实现代码如下:

html代码:

登录后复制

js代码:

$('#btn').on('touchstart', function() {    var value = $('input').val()    $('input').remove()    $('.box').html('')    if(value!=''){        $('input').val(value)    }    $('input').focus()})

登录后复制

相关推荐:

解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法

以上就是H5移动端页面点击input重复弹出键盘的实现方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3125064.html

(0)
上一篇 2025年3月29日 19:38:28
下一篇 2025年3月1日 23:45:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • H5页面中尝试调起APP实例代码

    本文主要和大家分享h5页面中尝试调起app实例代码,希望能帮助到大家。 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等。。。 点击后会调起APP或者打开下载页面或者直接进行下载。 但是我这里发现知乎的这个功能有点不一…

    2025年3月29日 编程技术
    100
  • H5开发视频遇到的问题及解决方案

    最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案。1、碰到问题和解决方案1.1、ios 网页中播放视频默认全屏(点击视频会弹出播放器进行全屏播放)。解决不全屏播放可以添加下列属性webkit…

    编程技术 2025年3月29日
    100
  • HTML5实现移动页面自适应手机屏幕的方法

    1、使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。…

    编程技术 2025年3月29日
    100
  • HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    本文主要和大家介绍了html5页面直接调用百度地图api获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下,希望能帮助到大家。 可以省下先发送位置信息后,点确定再出导航,省一步, nbsp;html>            H…

    编程技术 2025年3月29日
    100
  • H5最全面解读

    这次给大家带来h5最全面解读,深入理解h5,使用h5的注意事项有哪些,下面就是实战案例,一起来看一下。 官方:HTML5概念 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现…

    编程技术 2025年3月29日
    100
  • HTML5的集合

    这次给大家带来html5的集合,使用html5的注意事项有哪些,下面就是实战案例,一起来看一下。 一、HTML5增加元素:      用于图形绘制,通过脚本(常用JS)来完成;具体请参考JavaScript;          矢量图,支持…

    编程技术 2025年3月29日
    100
  • H5怎样做出图片拖拽上传预览组件

    这次给大家带来H5怎样做出图片拖拽上传预览组件,H5做出图片拖拽上传预览组件的注意事项有哪些,下面就是实战案例,一起来看一下。 H5中拖拽事件有:[ – ] DragDrop:拖放完成,也就是鼠标拖入对象并在拖放区域释放。[ &…

    编程技术 2025年3月29日
    100
  • h5制作性能变化折线图

    这次给大家带来h5制作性能变化折线图,h5制作性能变化折线图的注意事项有哪些,下面就是实战案例,一起来看一下。 通过动态设置内部元素高度 =>     nbsp;html>                示例1     #tit…

    编程技术 2025年3月29日
    100
  • 在webstorm中使用H5的快捷键

    这次给大家带来在webstorm中使用h5的快捷键,在webstorm中使用h5快捷键的注意事项有哪些,下面就是实战案例,一起来看一下。 快速移动选种的代码,上下移动 往上移动: Ctrl + shift + ⬆️ (方向键上)往下移动: …

    编程技术 2025年3月29日
    100
  • 如何使用H5的dataset

    这次给大家带来如何使用h5的dataset,使用h5的dataset的注意事项有哪些,下面就是实战案例,一起来看一下。      HTML5标准允许你在普通的元素标签里,嵌入类似data-*的注意事项,来实现一些简单数据的存取。它的数量不受…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论