uni-app input输入框number类型仍能输入点跟杠问题及键盘收起打开事件

_dannyWang_

已于 2023-10-19 09:05:30 修改

阅读量426

点赞数

文章标签：前端 vue.js

于 2023-04-14 15:48:00 首次发布

本文链接：https://blog.csdn.net/danny342354/article/details/130155381

版权

该文章描述了一个Vue.js组件，用于创建一个输入框，限制用户只能输入数字。当在安卓设备上时，代码监听窗口尺寸变化以检测软键盘的打开和关闭。同时，当键盘收起时触发失焦事件。在iOS设备上，键盘收起会导致输入框失去焦点。

摘要由CSDN通过智能技术生成

  <u--input class="li-input" fontSize="34"  maxlength='6' inputAlign='left' :focus='moneyFocus' v-model="inputMoney" type="tel" placeholder="最低输入20000元" @input="TypeInput($event)" @blur="shijiao"></u--input>

TypeInput(e, val) {
				// 只能输入数字的验证;
				const inputType = /[^\d]/g   //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					this.inputMoney = e.replace(inputType, '');
				})
			
			},
安卓端监听键盘打开关闭事件
defaultPhoneHeight: '', //屏幕默认高度
nowPhoneHeight: '', //屏幕现在的高度
onLoad(){
//安卓端-监听软键盘获取当前屏幕高度的事件
			this.defaultPhoneHeight = window.innerHeight
			window.onresize = () => {
				this.nowPhoneHeight = window.innerHeight
			}
}
 watch:{
			// 安卓端的
			//软键盘弹起事件
			nowPhoneHeight(){
				if(this.defaultPhoneHeight != this.nowPhoneHeight){
					//手机键盘被唤起了。
					// alert('键盘打开')
				}else{
					//手机键盘被关闭了。
					// alert('键盘收起')
					
				}
			}
			// ios端
			
			
		},
ios端键盘收起会失去焦点，直接用失焦事件
shijiao（）{

}