zoukankan      html  css  js  c++  java
  • 移动端webapp,在进入某页面后,input框自动获取焦点并弹出数字键盘

    在做项目的过程中,需求文档有个要求是,当进入页面后,第一个行input框要自动获取焦点,并弹出数字软键盘。

               个人认为这个问题,大家做移动端的时候应该会遇到,今天拿出来说说我们遇到的这个小bug。

    一个相对很简单的需求,但是值得记录一下,因为在此我们还是遇到了一些hack的。

    先说一下上面的这个问题的基础解决方案:

             autofocus 属性   :   文本输入字段被设置为当页面加载时获得焦点

             <input type="tel" autofocus="autofocus">  这一行代码其实就够了!

    但是问题来了、、

    问题点:

           android系统下

             QQ、uc浏览器,input输入框中需要页面进入即自动弹出数字软键盘,利用input标签属性autofocus=”autofocus”,经真机测试,依然无法弹出软键盘。

    解决方案:

             1、利用要获得焦点的input框添加一个focus(),此方法在chrome浏览器下无任何问题,但是在QQ、uc浏览器下虽然获取了焦点,但是无法弹出数字软键盘。

             2、利用setTimeOut()开一个定时器的方法,但是,android手机参差不齐,性能问题严重,不可控以及容错率太低,所以此方法比较不靠谱,不建议使用。

             3、利用trigge()方法,对要获得焦点的input框,调用一次”click”事件,既可解决上述问题。

                 xxxxxxxx.el.find('#c_payment_cardbin_input').trigger("click").focus();

    以上就是我们此次项目的解决方案,网上查了一些,但是也没找到更好的方法,个人感觉还是自己写的这个比较靠谱一些,不过上述方法能实现我们的项目需求,而且也能很好的解决万恶的Android机兼容性问题。

  • 相关阅读:
    总结Cnblogs支持的常用Markdown语法
    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python
    我的博客今天开通了,请多指教!
    技术分析:Femtocell家庭基站通信截获、伪造任意短信
    数据库防火墙如何防范SQL注入行为
    Pjax.js防刷新技术
    【写给新人】做开发几年的个人经历
    WebRTC之PeerConnection的建立过程
    基于Licode demo的屏幕共享功能的实现
    基于WebRTC的MCU开源项目Licode的环境搭建
  • 原文地址:https://www.cnblogs.com/weiqian/p/6522225.html
Copyright © 2011-2022 走看看