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

一、平台

手机移动端

二、实现的效果

当input输入框获得焦点时,在保留光标的情况下,又不让手机虚拟键盘弹起

刚开始在网上找了一番,网上的回答大都自以为是,根本没有弄清诉求,他们提供的三种解决方法,把input框用div代替、给input框设readonly属性、input获得焦点时使其失去焦点,统统都达不到我想要这种效果

好在后来还是让我找到了一位志同道合的博友,他的处境和我几乎一样,而且他的解决办法也十分有效

这是他的原文地址:https://blog.csdn.net/DACBE/java/article/details/89343053

这么方便有效的办法,居然没被发扬光大,所以我在这里再稍微加点扩散影响力,让更多的同仁看到

以下套路,原作者是用VUE实现的,我这里就结合自己的需求,改了一个jquery的版本,代码不多,大家一看就懂

<input type="text" placeholder="输入文字试试" id="test" onfocus="stopKeyborad($(this))">
<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>

其实就是在短时间内完成了这几步--》1.在触发焦点事件时将input设为readonly,避免系统唤起虚拟键盘——》2.等待短暂的200毫秒后,再将input输入框的readonly去掉——》3.这时光标还会在input上

如果还不能理解,就去看看原文作者的说法,我也是借花献佛

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

上一篇:this指向 以及 call、apply、bind的使用和区别


下一篇:vue 在package.json配置对外暴露访问地址(手机端访问本地项目地址)