uni-app自建数字键盘

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;
			}
}

成品展示

这篇好文章是转载于：学新通技术网