需求：
1、进入某个页面，需要一个输入框自动聚焦。
2、监听屏幕点击、长按、移动等手势操作，都使输入框聚焦；
注：
聚焦的目的是因为该页面提供给安卓设备使用，外接刷卡设备，刷卡机监测到刷卡时，会自动将卡号显示在有光标的可输入区域内。因为是安卓系统，输入框一聚焦就会调起手机小键盘。所以vue怎么禁用小键盘。
代码：
<template>
<div
class="SwipCard"
@touchstart="start"
@touchmove="move"
@touchend="end"
element-loading-text="登陆中，请稍等..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,?0,?0,?0.8)"
v-loading="loading">
<!--?请刷卡页面?-->
<h1>请刷卡页面</h1>
<!--?将input移出屏幕之外??-->
<!--???-->
<el-input v-model="cardNum" type="number" readonly @focus="$refs.autoFocusIpt.blur()" ref="autoFocusIpt" placeholder="请输入内容" @change="getCardNum" @blur="$refs.autoFocusIpt.focus()"></el-input>
</div>
</template>
<script>
import {?cardLogin?} from "@/api/all"
import {?Message?} from "element-ui"
export default {
name:"SwipCard",
data(){
return {
cardNum:"",
loading:false,//登录loading
longClick: 0,
timeOutEvent: 0
}
},
mounted(){
//?默认加载时获取焦点：
this.$refs.autoFocusIpt.focus()
},
methods:{
//?刷卡则：监听绑定的卡号值，如果有值则代表刷卡成功，调接口进行跳转
getCardNum(){
//?console.log(this.cardNum,'输出卡号')
//?输入框有值时，主动失去焦点：
if(this.cardNum){
$('#cardNum').blur()
this.loading = true
//?调取接口
var data = {
cardNo:this.cardNum,
}
cardLogin(data).then(res=>{
if(res.code == 0){
this.loading = false
this.$store.commit("user/SET_USERINFO",res.data)
this.$router.replace("/index")//登录成功，跳转至主页
} else {
this.loading = false
Message.error(res.msg)
}
}).catch(err=>{
this.loading = false
Message.error(err)
})
}
},
//?监听点击、滑动、长按手势操作，使input一直处于聚焦状态：
start()?{
var that = this;
this.longClick = 0;
this.timeOutEvent = setTimeout(function()?{
that.longClick = 1;
console.log("这是长按")
that.$refs.autoFocusIpt.focus()
}, 500);
},
move(e)?{
clearTimeout(this.timeOutEvent);
this.timeOutEvent = 0;
e.preventDefault();
console.log("这是滑动")
this.$refs.autoFocusIpt.focus()
},
end()?{
clearTimeout(this.timeOutEvent);
if (this.timeOutEvent != 0 && this.longClick == 0)?{
//点击
//此处为点击事件----在此处添加跳转详情页
console.log("这是点击");
this.$refs.autoFocusIpt.focus()
}
return false;
}
}
}
</script>
<style lang="scss" scoped>
.SwipCard{
//?border:1px?solid?#000;
width: 100vw;
height: 100vh;
}
</style>
