在ios系统,原生webview嵌套H5页面使用时,编写完成的6位数输入密码,输入密码卡顿问题的解决方案:
如下图:
原因是因为,CSS这块造成的。简单来说,风格左边为负数的时候出现的,android目测不会出现此问题
输入(type=tel) {
透明度:0;
z - index: 1;
位置:绝对的;
左:-100%;
}
重新设置输入样式问题
输入(type=tel) {
宽度:0.1 px;
高度:0.1 px;
颜色:透明;
位置:相对;
上图:23 px;
背景:# 000000;
左:46 px;
边界:没有;
字体大小:18 px;
透明度:0;
z - index: 1;
}
全部代码在这,你可以拿出去使用即可
& lt; template>
& lt; div id=皃ayPwd”比;
& lt; header>支付密码设置& lt;/header>
& lt;输入ref=" pwd " type="电话"最大长度=v模型“6”=拔毒崩?" pwd用来控制="上"/比;
& lt; ul类=" pwd-wrap " @click=敖沟恪北?
& lt;李:class="味精。长度==0 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;0”祝辞& lt;/i> & lt;/li>
& lt;李:class="味精。长度==1 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;1“祝辞& lt;/i> & lt;/li>
& lt;李:class="味精。长度==2 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;2“祝辞& lt;/i> & lt;/li>
& lt;李:class="味精。长度==3 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;3“祝辞& lt;/i> & lt;/li>
& lt;李:class="味精。长度==4 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;4“祝辞& lt;/i> & lt;/li>
& lt;李:class="味精。长度==5 & # 63;“psd-blink”:“在& lt;我v="味精。长度比;5“祝辞& lt;/i> & lt;/li>
& lt;/ul>
& lt;按钮类型=鞍磁ァ盄click=皊endCode祝辞获取验证码lodding
& lt;/div>
& lt;/template>
& lt; script>
从“进口api。/api”;
导入“@/js/跑龙套”;//公共方法
出口默认{
组件:{},
数据(){
返回{
味精:”,
}
}，
创建(){},
计算:{},
看:{
味精(curVal) {
如果(/^ \ [d]/g.test (curVal)) {
这一点。味精=this.msg。替换(/^ \ [d]/g,”);
}
}，
}，
方法:{
focus () {
美元。refs.pwd.focus ();
}，
sendCode () {//时间
utils.sendCode (event.target);//showLoading
utils.view.showLoading ();
setTimeout(函数(){
utils.view.dismissLoading ();
},5000);
}
}，
安装(){}
}
& lt;/script>
& lt;风格lang=吧佟眘coped>
# payPwd {
高度:汽车;
标题{
text-align:中心;
身高:80 px;
行高:90 px;
text-align:中心;
}
输入(type=tel) {
宽度:0.1 px;
高度:0.1 px;
颜色:透明;
位置:相对;
上图:23 px;
背景:# 000000;
左:46 px;
边界:没有;
字体大小:18 px;
透明度:0;
z - index: 1;
}//光标
.psd-blink {
显示:inline-block;
背景:url (/img/blink.gif。)没有重演中心;
}
.pwd-wrap {
宽度:90%;
高度:50 px;
padding-bottom: 1 px;
保证金:0汽车;
背景:# fff;
边界:1 px固体# ddd;
显示:flex;
显示:-webkit-box;
显示:-webkit-flex;
光标:指针;
位置:绝对的;
左:0;
右:0;
上图:13%;
z - index: 10;
李{
list-style-type:没有;
text-align:中心;
行高:50 px;
-webkit-box-flex: 1;
flex: 1;
-webkit-flex: 1;
边境:1 px固体# ddd;
和:胎{
边境:0;
}
我{
高度:10 px;
宽度:10 px;
这个特性:50%;
背景:# 000;
显示:inline-block;
}
}
}
按钮{
位置:相对;
显示:块;
高度:41 px;
text-align:中心;
保证金:0汽车;
margin-top: 70%;
填充:0 20 px;
border - radius: 5 px;
字体大小:16 px;
边界:1 px固体# dddddd;
背景:# dddddd;
颜色:# 000000;
}
}
& lt;/style>
附加:如果不想使用光标,直接
//去掉:class="味精。长度==0 & # 63;“psd-blink”:“即可
& lt; li> & lt;我v="味精。长度比;0”祝辞& lt;/i> & lt;/li>
