解决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>
相关文章推荐
- 解决微信页面中ios音乐不能自动播放问题
- 解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 取消浏览器页面字符编码的自动选择后IE不能自动识别网页编码的问题解决
- 关于bxslider在点击左右按钮之后不能自动切换的问题解决
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 移动端苹果ios input输入框点击后,页面会缩放,导致显示问题
- ios Simulator运行中 ,点击文本框不能自动弹出keyboards的问题
- iOS开发 高德地图 解决点击大头针跳转页面 返回无法点击的问题
- 解决页面表格中长英文字符串不能自动换行的问题
- 关于animation PlayState在ios上不起作用, 以及ios前端页面音乐不能自动播放的问题
- iOS 解决页面按钮同时点击,同时触发问题 设置所有UIButton的ExclusiveTouch属性为YES
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 解决ios上audio不能自动播放的问题以及监听audio播放状态
- iOS 开发: 解决Xcode7.3 不能自动索引头文件,文件名等问题
- 解决ios上audio不能自动播放,也不能连续播放的问题
- android 加载web view的时候,点击输入框,导致页面放大的问题解决方法
- ios开发中APP底部上滑不能调出如WiFi、蓝牙、播放等的设置页面的解决办法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法