您的位置:首页 > 移动开发 > IOS开发

解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题

2019-06-15 16:33 1921 查看

第一步:在标签的输入框中添加获取焦点事件  代码写法: @focus="getFocus" (vue代码)  可直接拷贝拿去放在自己页面元素中,如下:

<div class="o-field o-grid__cell carinfo-grid__cell">
<input
@blur="onPlaceholderMobleBlur"
         @focus="getFocus" :value="holderMobile" class="c-field" type="text" placeholder="请输入投保人手机号" maxlength="11"> </div>

第二步:在methods 方法中声明 获取焦点事件 如下写法,下面代码直接拷贝即可

methods: {
getFocus() {
$("input,textarea").on("blur", function() {
window.scroll(0, 0);
});
},

这里引入jQuery(jQuery还是很好用的)

实现原理:
      原理就是弹起键盘的时候,window.scrollY会从0变到键盘的高度(例如:200),当输入框焦点失去后让scrollY回到0就好了

或者 这么写只是不需要引入jQuery了

window.addEventListener('focusout', function () {
document.body.scrollTop = document.body.scrollHeight;
})

 

<div class="o-field o-grid__cell carinfo-grid__cell">
<input
@blur="onPlaceholderMobleBlur"
:value="holderMobile"
class="c-field"
type="text"
placeholder="请输入投保人手机号"
maxlength="11">
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐