移动端如何在前端对于输入框进行点击，滑动，长按操作时禁止拉起自带软键盘

移动端如何在前端对于输入框进行点击，滑动，长按操作时禁止拉起自带软键盘

​ 首先，该篇文章的目的为：在移动端点击输入框禁止拉起自带软键盘！！！

​ 最近，在进行公司项目需求处理时，需要实现一个能通过点击输入框位置，进行光标位置删除输入的功能，同时在进行删除和输入时使用的是自定义的数字键盘组件。实现了光标位置删除输入后，就发现出现了一个新问题：点击输入框会拉起手机自带的软键盘，于是就产生了该篇文章的需求。

​ 然后，通过看大量的论坛帖子，发现可以使用给输入框添加readonly属性来取消输入法的弹出，同时为了满足删除输入，必须设置定时器在一段时间后取消readonly属性，同时为了实现在点击、滑动、长按操作时都能有效，又学习到了使用@touchstart、@touchmove、@touchend，来监测移动端的点击，滑动，长按。话不多说，直接上代码：

首先在样式部分加上如下代码(重要)

*{
    -webkit-touch-callout: none !important;
  	-webkit-user-select: none;
}

输入框

<input
       @touchstart="goTouchstart"
       @touchmove="goTouchmove"
       @touchend="goTouchend"
       >
</input>

methods部分

data(){
    return:{
        // 判断是否点击的标志
        timeOutEvent:''
    }
}
methods:{
    /*
    * @Description:开始点击,只要开始点击，就为输入框添加只读属性，长按时进行长按所需要执行的操作
    * @Author:slimety
    * @Data:2022/8/18
    * */
    goTouchstart(e){
        // 设置输入框只读属性
        e.target.setAttribute('readonly',true);
        // 设置判断是否长按的定时器
        this.timeOutEvent = setTimeOut(function(){
            // 非点击标志
            this.timeOutEvent = 0;
            // 执行长按要执行的内容
            
            // 个人感觉下一行可有可无，保险起见添加
            e.target.setAttribute('readonly',true);
        },500);
        return false;
    },
    /*
    * @Description:长按操作，清除当前的定时器，将是否单击标志置为0
    * @Author:slimety
    * @Data:2022/8/18
    * */
    goTouchmove(){
        // 清除定时器
        clearTimeout(this.timeOutEvent);
        this.timeOutEvent = 0;
    },
    /*
    * @Description:判断是否为点击，为点击时移除输入框只读属性
    * @Author:slimety
    * @Data:2022/8/18
    * */
    goTouchend(e){
        clearTimeout(this.timeOutEvent);
        // 判断是否为点击
        if(this.timeOutEvent != 0){
            // 为点击时在200ms后移除输入框只读
            setTimeout(() => {
                e.target.removeAttribute('readonly');
            },200);
        }
        return false;
    }
}

​ 说说我个人的理解：

​ 关于-webkit-touch-callout: none !important;改行代码是用来禁止在IOS长按时弹出一个JavaScript提示的菜单栏，-webkit-user-select: none;不希望用户在你的网站上选择文本,第二个在我的项目中没体现出来，不知道为什么，感觉可有可无。

​ 关于@touchstart我的理解是：移动端我们将手放在屏幕上这个输入框上的时候就会触发该监听，@touchmove是我们的手在屏幕上这个输入框上滑动的时候就会触发该监听，@touchend是我们的手从屏幕上这个输入框上离开的时候就会触发该监听。再说一点需要注意的，这三个监听都能够同时触发多个，即我们用多个指头去点击时，监听到多个事件。因为我们是将事件绑定在了输入框上，对应的就在输入框上的操作，如果绑定在了整个页面上，就对应整个屏幕。

​ 途中遇到的问题：

​ 在过程中我将e.target.setAttribute('readonly',true);和e.target.removeAttribute('readonly');放在一个函数中，然后在单击和长按时进行调用，结果发现实现的效果并不理想，在点击时不会拉起软键盘，但是在长按时还是偶尔会拉起软键盘，思来想去是定时器的原因，因为判断长按是需要500ms的时间，在500ms之后才会执行e.target.setAttribute('readonly',true);该操作，在经过调整之后，得到了现在的代码，测试长按和单机均不会拉起软键盘，同时输入框也能够正常输入。

​ 以上代码目前在Android测试暂无问题，后续在IOS测试之后将在该篇文章继续更新。

主要参考博客：VUE–移动端长按事件（超清晰）

vue禁止移动端键盘弹出，使用自定义键盘

以上均为个人见解，如有错误，望各位大佬指出