h5 调起数字键盘的坑
为了限制只能输入数字,不能输入小数点、加减号,走了敲多的弯路~~(查各种资料,然后各种测试)
现下来看看笔记:
HTML5加入了新的input类型 number,这是方便数量输入的。如果是在移动端中,属性type=”number”和type=”tel”会唤起系统的数字键盘,这对于交互还是挺友好的。
一、 type="number"时
1、只允许输入数字,(兼容ios、安卓,但显示键盘不一样)
<input type="number">
ios图:
2、只允许输入数字和小数点,(兼容ios、安卓,但显示键盘不一样)
<input type="number" pattern="[0-9]*" >
<input type="number" pattern="\d">
对表单验证来说,这两个正则的作用是一样的,表现的话差异就很大:
iOS中,只有[0-9]*才可以调起九宫格数字键盘,\d 无效
Android 4.4以下(包括X5内核),两者都调起数字键盘;
Android 4.4.4以上,只认 type 属性,也就是说,如果上面的代码将 type=“number” 改为 type=“text” ,将调起全键盘而不会是九宫格数字键盘。
ios图:( 安卓是有小数点、加减等符号的!)
一、 type="tel"时
可调用(有英文字母的大概)键盘,能获取到输入的数字以及各种符号 ,能用正则表达式限制输入内容!!!一般情况下可用这个,不过还是要看个人需求了。
<input type="tel" >
注:问题来了
由于产品要求:只能输入数字,不要小数点,不能有加减等符号,第一个数字不能为0,所以只能用:
<input type="number" pattern="[0-9]*" min='0' >
没错,因为ios只弹出0-9数字选择,但有些手机依旧有小数点、加减等符号的输入键!!!
所以,type="number"时,这数据和视图不统一的做法,真让人蛋疼,视图里面的小数点显示了,但是结果却没有。当然这在键入其他符号的时候处理的更加”劲爆”:
因为 根本获取不到小数点,以及加减等符号!想做js判断都没得,输入数字后再输入加减号后,返回的值直接为空!
1、小数点:
2、加减号:
所以建议在面对输入数量,而且要监控每次输入这样的需求时,尽量不好使用number的属性。
要想做到实时的对输入结果进行监控,type=number比较费劲,而type=tel只需要监控每一次的结果就ok了。
(但事实是要求要用数字键盘…试图判断了许久不行后,只好手写一个了,泪崩)
手写了个移动端键盘-(后来结果~~)
Vant组件库: https://youzan.github.io/vant/#/zh-CN/popup
引用vant组件库,底部弹出框,做好的效果如下:(还不错,判断也简单多了,需要小数点的话,也可用在左下角空格地方加上,稍做判断)
html:(代码是拷贝手写密码框拷贝过来的,命名勿计较,逻辑是按我的需求直接复制过来的,使用自己手动修改)
<div class="btn" @click='showPwInput2=true'>弹出数字模态框</div>
<!-- 数字键盘,输入金额 -->
<div class="num-box">
<van-popup v-model="showPwInput2" class="pwPop" position="bottom">
<div class="forget border-b" @click="showPwInput2=false" style="text-align: center;padding: 0;height: 0.7rem;padding-top: 0.1rem;">
<img style="width: 0.58rem;transform: rotateZ(90deg);display: inline;" src="../../images/icon_go@2x.png"/>
</div>
<div class="inputs">
<div @click="inputNum2('1')">1</div>
<div @click="inputNum2('2')">2</div>
<div @click="inputNum2('3')">3</div>
<div @click="inputNum2('4')">4</div>
<div @click="inputNum2('5')">5</div>
<div @click="inputNum2('6')">6</div>
<div @click="inputNum2('7')">7</div>
<div @click="inputNum2('8')">8</div>
<div @click="inputNum2('9')">9</div>
<div class="bg-gray"></div>
<div @click="inputNum2('0')">0</div>
<div @click="delNum2" class="bg-gray">
<img src="../../goods/img/auctionGoodsDetail/tuige.png" />
</div>
</div>
</van-popup>
</div>
js: (导入vant组件库)
<link rel="stylesheet" href="../../css/vant.css">
<script src="../../js/lib/vue.min.js"></script>
<script src="../../js/lib/vant.min.js"></script>
data: {
categoryMargin: '',
num: 0,
inputMoney: '',
},
methods: {
//数字键盘
inputNum2: function(num) {
if(this.inputMoney.length==0&&num=='0'){
this.inputMoney = '';
}else if(this.inputMoney.length<8){
this.inputMoney = this.inputMoney+num;
}
this.categoryMargin = this.inputMoney;
},
//数字键盘 删除
delNum2: function() {
this.inputMoney = this.inputMoney.substring(0,this.inputMoney.length-1);
this.categoryMargin = this.inputMoney
},
}
css:
/*type为number时,隐藏右边的上下按钮*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
/*后来加上的,用的话自己稍微整理下*/
.input-num{
width: 100%;
height: 100%;
text-align: center;
line-height: 1.29rem;
display: block;
font-size: 0.44rem;
padding: 0 0.2rem;
overflow: hidden;
}
.num-box .van-modal{
background-color: rgba(0, 0, 0, 0)!important;
}
.num-box .pwPop {
box-shadow: 0 0 0.2rem #999;
}
/*原先编写的*/
.pwPop .tit{
position: relative;
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
}
.pwPop .tit img{
position: absolute;
width: 0.4rem;
left: 0.4rem;
top: 0.4rem;
}
.pwPop .pwinput{
display: flex;
height: 1.29rem;
border: 1px solid #EEEEEE;
margin: 0.87rem 1rem 0.3rem 1rem;
}
.pwPop .pwinput div{
width: 1.29rem;
height: 1.29rem;
border-right: 1px solid #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.48rem;
font-weight: bold;
}
.pwPop .pwinput div img{
width: 0.3rem;
height: 0.3rem;
}
.pwPop .pwinput div:nth-of-type(6){
border-right:none!important;
}
.pwPop .forget{
height: 0.3rem;
padding: 0 1rem 0.65rem 0;
}
.pwPop .inputs{
clear: both;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
}
.pwPop .inputs div{
font-size: 0.48rem;
font-weight: bold;
width: 33%;
height: 1.29rem;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
.pwPop .inputs div:nth-of-type(3n){
border-right:none!important;
}
.pwPop .inputs div img{
width: 0.68rem;
}