解决安卓上底部使用fixed布局,键盘弹出后fixed部分的内容挡住form表单的情况

今天写了一个登录,但是登录按钮是固定在页面最底部。这种布局下,ios手机上是没问题的,但是在安卓手机上,键盘弹出后,登录按钮会挡住form表单。

原因就是,ios手机在键盘弹出后,页面高度不会发生变化的,但是安卓手机上键盘弹出后,页面高度 = 原始高度- 键盘高度。

原本想的就是根据input输入框的获焦和失焦来判断键盘的弹起与关闭,但是后来发现,有些手机上面的键盘有一个收起的按钮,点击那个按钮会收起键盘,但是不会触发失焦事件。并且在多个input输入框之间来回切换的时候也会有问题。

解决办法:由于无法获取键盘高度,所以只能监听页面高度变化,在发生变化的时候,改变登录按钮的定位方式。将fixed改为static(或者relative)

代码如下:

var client_h = document.documentElement.clientHeight;
			$(window).on("resize",function(){
				var body_h =  document.body.scrollHeight;
				if(body_h < client_h){
					$(".operate").removeClass("fixed");
					console.log("小了");
				}else{
					console.log("正常");
					$(".operate").addClass("fixed");
				}
			});



  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码: ```html <button id="openModal">打开弹出窗口</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <h2>弹出窗口</h2> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="age">年龄:</label> <input type="number" id="age" name="age"><br><br> <button type="submit" id="submit">确定</button> </form> </div> </div> ``` CSS代码: ```css .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 60%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` JavaScript代码: ```javascript // 获取元素 var openModalBtn = document.getElementById("openModal"); var modal = document.getElementById("modal"); var closeModalBtn = document.getElementsByClassName("close")[0]; var submitBtn = document.getElementById("submit"); // 点击打开弹出窗口按钮 openModalBtn.onclick = function() { modal.style.display = "block"; } // 点击关闭按钮 closeModalBtn.onclick = function() { modal.style.display = "none"; } // 点击确定按钮 submitBtn.onclick = function() { // 获取表单中的值 var name = document.getElementById("name").value; var age = document.getElementById("age").value; // 对表单进行简单校验 if (name === "" || age === "") { alert("姓名和年龄不能为空!"); } else { // 弹出框关闭 modal.style.display = "none"; } } // 点击弹出框外部区域,弹出框关闭 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 效果如下: ![弹出窗口效果图](https://i.imgur.com/9GOb0GS.gif)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值