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

Posted 2020-12-16 mooncher

一、平台

手机移动端

二、实现的效果

当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上

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