最近工作中，需要自动唤起手机数字键盘，大家都知道有个属性是v-focus。 发现在浏览器中是完全没有问题的，打包后，在苹果手机上不可以自动唤起，而在安卓手机上可以。让我很是费解，上网查，得到的答案都是ios系统由于安全机制问题不允许自动唤起，必须得手动触发才可以。
于是，借鉴了广大网友们的意见，最后决定自己手写一个手机键盘，话不多说，代码呈上
首先，这是输入密码框以及遮罩，我引入了mint-ui，引用了它的一个lodeing效果
<div class='overlay' v-show='overlay'><mt-spinner type="triple-bounce" class='overlaySpanner' v-show='overlaySpanner'></mt-spinner></div><div class='tips' v-show='overlay'><div class='tipsHeader'><img src="../assets/img/close.png" class='close' @click='closeTips'><span>提示</span></div><div class='tipsMain'><div class='doorNum'><span>请输入二次密码</span></div></div><div class='password'><div class="pwd-box"><input type="tel" maxlength="6" class="pwd-input" id="focusid" v-model="realInput"@click='inputBlur'/><div class="fake-box"><li v-for="disInput in disInputs"><input type="password" v-model="disInput.value" /></li></div></div></div></div>然后，下面是手机数字键盘的部分
<div class="pay-tool-keyboard" v-show='overlayTips'> <ul> <li @click="keyUpHandle($event)" v-for="val in keys">{{ val }} </li> <li class="del" @click="delHandle"><img src="../assets/img/delete.png" ></li> </ul> </div>
接下来的是重要部分
export default {data(){return {scoreArray: [],realInput: '',disInputs: [{value: ''},{value: ''},{value: ''},{value: ''},{value: ''},{value: ''}],overlay: false,overlaySpanner: false,overlayTips: false,text: [],keys: [1,2,3,4,5,6,7,8,9,'',0],}},watch: { realInput(curVal) { let array = curVal.split(""); this.disInputs = [{value: ''},{value: ''},{value: ''},{value: ''},{value: ''},{value: ''}] for (let i = 0; i < array.length; i++) { this.disInputs[i].value = array[i]}}},methods: {//使input框失去焦点，不能唤起手机键盘 inputBlur(){ document.activeElement.blur();}, // 输入二次确认密码 keyUpHandle(e){ this.text.push(e.currentTarget.innerText) this.realInput = ''; for(let i = 0; i < this.text.length; i++) { this.realInput += this.text[i];} console.log(this.realInput) // 表示字符串中某个位置的数字，即字符在字符串中的下标。 if (this.realInput.length === 6) { this.overlayTips = false; this.overlaySpanner = true; this.param.confirmPwd = this.realInput; this.ajax(this, this.extendApi.landlordConfirmRec, JSON.stringify(this.param),(res) => { this.overlay = false; this.overlaySpanner = false; if (res.responseCode === 200) { this.disabled = true; this.mint.Toast("订单支付成功"); this.reservationMessage.status = 20;} else if (res.responseCode === 408) { this.mint.Toast(res.responseMsg); sessionStorage.clear(); localStorage.clear(); this.$router.push({name: '/'});} else { this.mint.Toast(res.responseMsg);} this.text = []; this.realInput = ''; this.disInputs = [{value: ''},{value: ''},{value: ''},{value: ''},{value: ''},{value: ''}];}, 'POST', 1);}}, delHandle(){ if (this.text.length <= 0) return false this.text.pop(); this.realInput = ''; for(let i = 0; i < this.text.length; i++) { this.realInput += this.text[i];}}, // 支付订单 submitBtn() { this.param.orderType = this.reservationMessage.feeType; this.param.orderNo = this.reservationMessage.monthRecordId; this.param.amount = this.reservationMessage.payMent; MessageBox.confirm("是否确定已支付？").then(action => { this.overlay = true; this.overlayTips = true;}).catch(err => {})}, //关闭二次确认密码 closeTips(){ this.overlayTips = false; this.overlay = false; this.text = []; this.realInput = ''; this.disInputs = [{value: ''},{value: ''},{value: ''},{value: ''},{value: ''},{value: ''}];} }
css
@keyframes test {to { bottom: 0; left: 0; opacity: 1;}} .pay-tool-keyboard { position: fixed; left: 0; bottom: -18.4rem; width: 100%; background: #fff; animation: test 0.5s 0.5s linear; animation-fill-mode: both; z-index: 10;ul { width: 100%; display: flex; flex-wrap: wrap;li { width: 33.1%; height: 4.5rem; line-height: 4.5rem; text-align: center; border-right: 1px solid #aeaeae; border-bottom: 1px solid #aeaeae; font-size: 1.6rem; font-weight: bold; list-style: none; color: #3d3b3b;&:nth-child(1), &:nth-child(2), &:nth-child(3) { border-top: 1px solid #eee;}&:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) { border-right: none;}&:nth-child(10), &:nth-child(11), &:nth-child(12) { border-bottom: none;}&:nth-child(10), &:nth-child(12), &:active { background-color: #d1d4dd;}&:nth-child(12):active { background-color: #fff;} img { margin: 6px 0 6px 0;}}}} /* 开锁密码 */ .tips{ width: 80%; position: fixed; top: 50%; left: 50%; margin: -50% 0 0 -40%; z-index: 5; background: rgb(255,255,255); border-radius: 5px;} .tipsHeader{ width: 100%; margin: 0.5rem 0; text-align: center;} .tipsHeader .close{ float: left; margin: 10px 0 0 10px;} .tipsHeader span{ font-size: 22px; margin-left: -30px;} .tipsMain .doorNum{ width: 100%; padding: 0.5rem 0; font-size: 16px; color: #7b7b7b; text-align: center;} .password{ margin: 1.25rem; border: 1px solid #C4C4C6;} .pwd-box{ width:100%; padding-left: 1px; position: relative; border-radius: 3px; overflow: hidden;} .pwd-box input[type="tel"]{ width: 100%; height: 4rem; color: transparent; position: absolute; top: 0; left: 0; border: none; font-size: 18px; opacity: 0; z-index: 1; letter-spacing: 35px;} .fake-box{ width: 100%; /*overflow: hidden;*/ display: flex;} .fake-box li{ height: 3.9rem; border-right:1px solid #ddd; list-style: none; flex: 1;} .fake-box input{ width: 100%; height: 3.9rem; float: left; border: none; border-right: 1px solid #e5e5e5; text-align: center; font-size: 30px;} .fake-box input:nth-last-child(1){ border:none;} /* 遮罩 */ .overlay{ background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 4; /* 此处的图层要大于页面 */}
最后效果如下：
希望有幸能够帮到您。
PS:我也是菜鸟一枚，如果您有更好的解决办法可以在下方留言
