uniapp自建数字键盘
1.制作原因
手机自带的数字键盘有许多不需要的杂功能,而且个输入法和手机型号不同,导致显示出来的完成按钮格式不一;
2.项目需求
键盘中有下一项,并且点击下一项页面向下滚动,自动光标定位到下一个输入框中,不能遮挡文本框。我去uniapp官网找了一下发现有个功能:“softinputMode”: “adjustResize”,这个可以改变原来的键盘弹出是否挤压页面,但是我使用其中属性不是影响页面样式就是不能下拉滚动了。
不墨迹,直接上代码
组件中的代码
// 起名叫MyNumberInput
<template>
<view>
<view class="uni-input Numberinput" :class="{'inputdis':Isedit}" @click="maskShow" :id="'input_'+myevent">
<text>{{myvalue}}</text>
<text class="myfous" v-if="IsShow"></text>
</view>
<view class="mybrankmask" v-if="IsShow">
<view style="padding: 20rpx;">
<view class="MymaskList">
<view class="maskListItem" @click="NumberCk(1)">1</view>
<view class="maskListItem" @click="NumberCk(2)">2</view>
<view class="maskListItem" @click="NumberCk(3)">3</view>
<view class="maskListItem" style="background-color: #FFA500;color: #fff;" @click="Cancelword()">取消</view>
</view>
<view class="MymaskList">
<view class="maskListItem" @click="NumberCk(4)">4</view>
<view class="maskListItem" @click="NumberCk(5)">5</view>
<view class="maskListItem" @click="NumberCk(6)">6</view>
<view class="maskListItem" style="background-color: #67C23A;color: #fff;" @click="Tuige()">退格</view>
</view>
<view class="MymaskList">
<view class="maskListItem" @click="NumberCk(7)">7</view>
<view class="maskListItem" @click="NumberCk(8)">8</view>
<view class="maskListItem" @click="NumberCk(9)">9</view>
<view class="maskListItem" style="background-color: #F56C6C;color: #fff;" @click="Clear()">清空</view>
</view>
<view class="MymaskList">
<view class="maskListItem" @click="NumberCk(0)">0</view>
<view class="maskListItem" @click="NumberCk('.')">.</view>
<view class="maskListItem" style="background-color: #31BDEC;color: #fff;width: 48%;" @click="Next()">下一项</view>
</view>
</view>
</view>
</view>
</template>
组件中的js和css代码
<script>
export default{
data(){
return {
inputId:'',
inputShow:false
}
},
props:{
IsShow:{
type:Boolean,
default:false
},
Isedit:{
type:Boolean,
default:false
},
myvalue:{
type:[String,Number],
default:''
},
myevent:{
type:String,
default:''
}
},
methods:{
maskShow(){
this.$emit('Mykeywordck');
},
NumberCk(val){
if(val=='.'){
if(this.myvalue.toString().indexOf('.')>=0){
return;
}
}
var txt = this.myvalue == null?'':this.myvalue;
var arr = { even:this.myevent,value:txt + val.toString() };
this.$emit('setValue', `${JSON.stringify(arr)}`);
//this.$emit('update:myvalue',txt + val.toString());
},
Tuige(){
if(this.myvalue!=null){
var txt = this.myvalue.toString();
if(txt.length>=1)
//this.$emit('update:myvalue',txt.substring(0,txt.length-1));
var arr = { even:this.myevent,value:txt.substring(0,txt.length-1) };
this.$emit('setValue', JSON.stringify(arr));
}
},
//取消按钮
Cancelword(){
this.$emit('Cancelword');
},
//清除按钮
Clear(){
var arr = { even:this.myevent,value:null };
this.$emit('setValue', JSON.stringify(arr));
},
//下一个
Next(){
this.$emit('goNext');
}
}
}
</script>
<style>
.Numberinput{display: flex;align-items: center;}
.myfous{width: 1rpx;height: 41rpx;background-color: #000;display: block;animation: mytreat 1.5s linear infinite;}
.mybrankmask{width: 100%;height: 470rpx;background-color: #EBEEF5;position: fixed;z-index: 999;left: 0;bottom: 0;}
.mybrankmask .MymaskList{display: flex;width: 100%;justify-content: space-around;margin-bottom: 20rpx;}
.mybrankmask .MymaskList .maskListItem{width: 23%;height: 90rpx;background-color: #fff;text-align: center;line-height: 90rpx;border-radius: 10rpx;}
//自定义光标模拟Input焦点
@keyframes mytreat{
/*开始画面*/
0%{
background-color: #000;
}
50%{
background: none;
}
100%{
background-color: #000;
}
}
</style>
接下来就是父级页面调用代码啦
//页面
<scroll-view>
<AmountInput :myvalue="Data.ktv" :Isedit="Isedit" :IsShow="MykeywordShow"
:myevent="'ktv'"
@setValue="mykeywordset" v-if="InputEvent=='ktv'"
@Cancelword="Cancelword"
@goNext="goNext('ktv')"></AmountInput>
<view class="uni-input" :class="{'inputdis':Isedit}" @click="SetInputKey('ktv')" v-else>
{{Data.ktv}}</view>
<AmountInput :myvalue="Data.ktv2" :Isedit="Isedit" :IsShow="MykeywordShow"
:myevent="'ktv2'"
@setValue="mykeywordset" v-if="InputEvent=='ktv2'"
@Cancelword="Cancelword"
@goNext="goNext('ktv2')"></AmountInput>
<view class="uni-input" :class="{'inputdis':Isedit}" @click="SetInputKey('ktv2')" v-else>
{{Data.ktv2}}</view>
</scroll-view>
//js使用
const Equ_List=['ktv','ktv2'];
data(){
return{
Isedit:false,
InputEvent:'',
MykeywordShow:false,
bottomHeight:'0rpx'
}
},
methods:{
Cancelword(){
this.bottomHeight = '10rpx';
this.MykeywordShow =false;
this.InputEvent = '';
},
goNext(val){
var inputList = Equ_List;
if(this.menuIndex==1){
inputList = Sign_List;
}
var index = inputList.indexOf(val);
this.setScrollTops(val);
if(index<inputList.length-1){
this.InputEvent = inputList[index+1];
}else{
this.bottomHeight = '10rpx';
this.MykeywordShow = false;
}
},
mykeywordset(datatxt){
var arr = JSON.parse(datatxt);
this.Data[arr.even] = arr.value;
},
SetInputKey(even){
this.InputEvent = even;
this.setScrollTops(even);
if(!this.MykeywordShow){
this.bottomHeight = '320rpx';
this.MykeywordShow = true;
}
},
setScrollTops(even){
var inputList = Equ_List;
var index = inputList.indexOf(even);
this.viewTop = (index + 1) * 60 + 100;
}
}