今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
IOS不自动弹出键盘，必须手动触发一下focus才行，不能自动调用，所以需要诱导用户点击某个按钮触发focus，最终修改的方法，默认隐藏密码输入框，隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内，并且调用focus的方法
代码如下，有问题欢迎评论
输入密码
使用余额支付 8864
支付密码：
确认支付 .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-title span{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:30px 10px 0; background: #fff; } .write-phonenum p{ font-size: 14px; margin-left:30px; line-height:2; } .write-phonenum p span{color: #3b90d1;} .write-input {width:312px; margin:10px auto; position: relative;} .write-input li{float: left;width:30px;height:30px; margin: 0 10px; border:1px solid #888888;} .write-input li input{-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:10px auto;} .realInput{ /* Keyword values */ -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;}
以上就是解决vue js IOS H5focus无法自动弹出键盘的问题的详细内容，更多请关注本站其它相关文章！
