Html5 h5页面输入框失去焦点页面底部白板问题

H5网页中，用户输入完成后关闭输入框后底部会出现白条，如下图：

解决方案：

在输入框失去焦点的时候，设置窗口页面滚动至0即可：

$(window).scrollTop(0,0);

vue项目中的实例：

<template><div class="item"><input type="text" @blur="blurFoucus()"  v-model="formData.company_name" placeholder="请输入公司名称"></div>
</template><script>import $ from 'jquery'export default {data() {return {formData:{},}},methods:{blurFoucus(){$(window).scrollTop(0,0);}}}
</script>

Html5 h5页面输入框失去焦点页面底部白板问题相关推荐

JavaWeb网上图书商城完整项目--day02-2.regist页面输入框得到焦点隐藏label
实现当光标输入在输入输入框的时候,将后面的内容隐藏,例如在用户名称输入信息的时候,后面的用户名不能为空隐藏我们来看看regist.js的代码: //该函数在html文档加载完成之后会调用 $(fun ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置...
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置
IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦, ...
h5页面输入框在安卓手机上被键盘挡住
h5页面输入框在安卓手机上被键盘挡住 1.弹窗的解决方法 .floatbox{position:absolute; top:50%; right:0; bottom:0; left:0; backgr ...
解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
H5页面页面在iphoneX手机上底部会有留白解决办法
H5页面页面在iphoneX手机上底部会有留白解决办法在meta viewport标签里加属性:viewport-fit=cover:如下 <meta name="viewport& ...
html5用代码实现页面跳转页面跳转,H5上滑跳转页面的实现（代码实例）
本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 方法一:movePage($('body')); function movePage(dom) ...
html5 自动失去焦点,JavaScript onblur 事件：页面元素失去焦点
JavaScript onblur 事件页面元素失去焦点时会触发 onblur 事件. 下面的例子验证用户输入的内容是否符合要求的11位手机号码: function checkMobile(inpu ...

Html5 h5页面输入框失去焦点页面底部白板问题

Html5 h5页面输入框失去焦点页面底部白板问题相关推荐

最新文章

热门文章