vue解决ios不能自动唤起手机数字键盘问题
最近工作中，需要自动唤起手机数字键盘，大家都知道有个属性是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:我也是菜鸟一枚，如果您有更好的解决办法可以在下方留言