极客观点
项目管理
HarmonyOS
需求：
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>
最终的结果是，外接刷卡器的设备是windows系统，不会出现小键盘。