关于手机键盘挡住输入框的问题

浮动窗口表单调整技巧
本文介绍了一种解决浮动窗口表单在页面中位置偏移问题的方法。通过获取当前页面的margin值和滚动条的位置,动态调整表单的marginTop属性以实现页面自动上浮的效果。虽然方法简单,但在特定场景下实用有效。

项目结构大概是这个样子:

在主页面有5个浮动窗口的表单,因为是浮动窗口,不知道为什么页面不会自动上浮,想了很就,也试过很多方法,但是都不是很理想。

于是,只能用最笨的方法。。。。设置 margin-top这个属性

原理是, 当获取文本框光标时,设置这个属性, 失去焦点时,在删除这个属性。(我想没有比我更笨的办法了,唯一的优点我想就是简单吧)


于是跟着想法来 

先获取当前页面的margin和当前滚动条的margin 相加

       var top = document.getElementById('margin').offsetTop+document.body.scrollTop;


然后 给这个页面的marginTop属性赋 一个 负值,然后在减去 获得的top(大概位置差不多)
     document.getElementById("margin").style.marginTop = (-200 - top) + "px";


上面时获取焦点事件 

然后就是 失去焦点事件

$("#margin").removeAttr("style");  

ok , 最笨的方法了 ,希望能帮到大家

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值