手機端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上

如果還不能理解，就去看看原文作者的說法，我也是借花獻佛