解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题
第一步:在标签的输入框中添加获取焦点事件 代码写法: @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了
1 window.addEventListener('focusout', function () { 2 document.body.scrollTop = document.body.scrollHeight; 3 })
<div class="o-field o-grid__cell carinfo-grid__cell">
<input
@blur="onPlaceholderMobleBlur"
:value="holderMobile"
class="c-field"
type="text"
placeholder="请输入投保人手机号"
maxlength="11">
</div>