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

成品展示

uniapp自建数字键盘相关推荐

手把手教你撸touchgfx的数字键盘(一)
目录 1.准备工作 1.1.软件准备 1.2.硬件准备 2.键盘制作 2.1.键盘背景图设计 2.2.自定义键盘控件 2.3.screenview与keyboard之间传递消息 3.实验效果 4.功能 ...
一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
linux服务器远程桌面数字键盘不能用
linux服务器远程数字键盘不能用 xface快捷键,数字键盘 https://wiki.archlinux.org/index.php/Activating_Numlock_on_Bootup_( ...
UIKeyboardTypeNumberPad 数字键盘添加完成按钮
一:添加通知 //数字键盘添加完成 [[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(keyboardWi ...
计算机小键盘顺序,为什么电脑、电话数字键盘排列顺序不同？
这两样东西是很多人天天都在用的,但相信绝大多数人都没有发现它们的不一样:看看电脑键盘右侧的数字区,再看看电话拨号键盘,有没有发现不一样? 没错,同样都有0-9十个阿拉伯数字,但而这的排列顺序完全不同! ...
android自定义数字键盘和字母键盘,Android自定义键盘的实现（数字键盘和字母键盘）...
Android自定义键盘的实现(数字键盘和字母键盘) 发布时间:2020-09-04 03:18:48 来源:脚本之家阅读:100 作者:浪淘沙xud 在项目中,产品对于输入方式会有特殊的要求,需要 ...
android webview 数字键盘,android – 在WebView中显示数字键盘
我有一个webview,我在登录屏幕上手动显示键盘并专注于输入字段. 领域: 聚焦和显示键盘: webView.requestFocus(View.FOCUS_DOWN); webView.loadU ...
H5+JS+相对单位rem实现第三方支付页（输入金额+模拟数字键盘+自适应布局+大写金额）
最近做了个第三方支付页,H5+JS+相对单位rem实现(输入金额+模拟数字键盘+自适应布局+大写金额). 源码github地址:https://github.com/XieTongXue/how-to ...
ios 数字键盘左下角添加按钮_iOS8数字键盘加左下角完成button
iOS8数字键盘加左下角完成button的核心代码如下面: - (void)addDoneButtonToNumPadKeyboard { UIButton *doneButton = [UIButt ...
安卓键盘加上数字_Android自定义键盘的实现（数字键盘和字母键盘）
在项目中,产品对于输入方式会有特殊的要求,需要对输入方式增加特定的限制,这就需要采用自定义键盘.本文主要讲述数字键盘和字母键盘的自定义实现. 键盘效果: 自定义键盘的实现步骤如下: 自定义Custom ...

uniapp自建数字键盘

uniapp自建数字键盘

不墨迹，直接上代码

组件中的代码

组件中的js和css代码

接下来就是父级页面调用代码啦

成品展示

uniapp自建数字键盘相关推荐

最新文章

热门文章