好资源导航 » 文章资讯 » 解决vue js IOS H5focus无法自动弹出键盘的问题

解决vue js IOS H5focus无法自动弹出键盘的问题

2023-09-08 13:31:04 71

IOS不自动弹出键盘，必须手动触发一下focus才行，不能自动调用，所以需要诱导用户点击某个按钮触发focus，最终修改的方法，默认隐藏密码输入框，隐藏不能用v-if或者是v-show,用position:absolute,top:-1000,然后点击输入密码将top改为视窗内，并且调用focus的方法

代码如下，有问题欢迎评论





.enter-password{
text-align:right;
color:#1D890D;
font-size:18px;
line-height:2;
margin-top:20px;
padding-right:20px;
}
.phonenum-show{
background:rgba(0,0,0,0.6);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
}
.getback-titlespan{position:absolute;right:0;top:3px;width:15px;height:15px;display:inline-block;}
.write-phonenum-1000{
top:-1000px!important;
}
.write-phonenum{
position:absolute;
top:50%;
margin-top:-100px;
left:0;
right:0;
bottom:0;
z-index:2;
padding:30px10px0;
background:#fff;
}
.write-phonenump{
font-size:14px;
margin-left:30px;
line-height:2;
}
.write-phonenumpspan{color:#3b90d1;}
.write-input{width:312px;margin:10pxauto;position:relative;}
.write-inputli{float:left;width:30px;height:30px;margin:010px;border:1pxsolid#888888;}
.write-inputliinput{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;resize:none;outline:none;border:0;width:30px;line-height:30px;text-align:center;height:30px;font-size:16px;}
.write-phonenum.mint-button--default{background:#3b90d1;color:#fff;font-family:"微软雅黑";font-size:14px;width:80%;margin:10pxauto;}
.realInput{
/*Keywordvalues*/
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
resize:none;
outline:none;
border:0;
z-index:3;
position:absolute;
width:290px;
height:30px;
line-height:30px;
background:none;
display:block;
left:50%;
margin-left:-145px;
top:34px;
opacity:0;
font-size:0px;
caret-color:#fff;
color:#000;
text-indent:-5em;
font-size:30px;
top:1px;
}
input[type="tel"]:disabled{background-color:#fff;}

以上这篇解决vuejsIOSH5focus无法自动弹出键盘的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

解决vue js IOS H5focus无法自动弹出键盘的问题

热门推荐

随机推荐