在移动端上,输入时不想启动自带的输入法,只想直接在页面上按按就能输入数字,十分方便。
代码如下:
<input class="input-num" v-model="value" @tap="hideKeyboard"/>
<view class="number">
<view class="every" v-for="(item,index) in numberList" @tap="inputNumber(index)"
@longtap="clearNumber(index)">{{item}}</view>
</view>
css:(可以自己设置)
.input-num {
width: 480rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 10rpx;
background-color: rgba(221, 230, 251, 100);
color: rgba(16, 16, 16, 100);
font-size: 30rpx;
text-align: center;
margin: 20rpx auto;
}
.number {
width: 480rpx;
margin: 0 auto;
border-radius: 20rpx;
overflow: hidden;
.every {
display: inline-block;
width: 160rpx;
height: 100rpx;
line-height: 100rpx;
background-color: rgba(0, 48, 157, 100);
color: rgba(255, 255, 255, 100);
font-size: 36rpx;
text-align: center;
font-family: Roboto;
border: 1px solid rgba(255, 255, 255, 100);
}
}
js:
data() {
return {
value: '',
numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, "清除", 0, "开启"]//键盘的内容
}
},
methods: {
//点击聚焦,隐藏自带的键盘
hideKeyboard(){
uni.hideKeyboard();
},
//键盘主功能
inputNumber(index) {
if ((typeof this.numberList[index]) == 'number') {
this.value += this.numberList[index]
}
if (this.numberList[index] == '清除') {
this.value = this.value.slice(0, -1)
}
if (this.numberList[index] == '开启') {
if (this.value == 0) {
console.log('不能为空');
} else {
自己写一些跳转什么的
}
}
},
//长按清除的时候,触发连续清除
clearNumber(index) {
if (this.numberList[index] == '清除') {
console.log(this.value, "chang");
let clearNum = setInterval(() => {
this.value=this.value.slice(0,-1)
if (this.value == '') {
clearInterval(clearNum)
}
}, 200)
}
}
}
一些注意的地方:
1、最好有长按清除的方法,不然一直长按清除只能触发一次,影响用户体验。
2、注意隐藏自身的键盘,这里最好使用uni.hideKeyboard()方法,虽然disabled=true也可以不弹出,但是不能聚焦,也会影响用户体验。