l***@sina.com
l***@sina.com
  • 发布:2018-01-05 16:36
  • 更新:2018-01-09 17:11
  • 阅读:2567

输入框获取焦点软键盘弹出该输入框被遮挡

分类:MUI

输入框获取焦点软键盘弹出该输入框被遮挡

如果输入框不被遮挡,怎么处理?
比如,设计师输入框未获取焦点之前是这样的


设计师输入框获取焦点之后变成了这样

设计师输入框没有显示出来,是怎么回事呢?各位大侠解决一下!可以查看附件muilogin.rar

2018-01-05 16:36 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

1.代码不清楚,上传附件形式的demo;
2. 猜测应该是fixed+input出现的问题,这东西在ios上面天然存在问题,建议换种实现方式

  • l***@sina.com (作者)

    老师您好,我现在已经上传了demo ,麻烦你看一下,android 的也出现遮挡!谢谢


    2018-01-09 09:59

Neil_HL

Neil_HL

针对这个demo:安卓端监听当窗口大小发生改变时,判断下软键盘弹起时是否会挡住当前获得焦点的输入框,会的话改变mui-scroll-wrapper的top值(为现在高度-原来高度),ios端不需要做改变,软键盘都不会挡住输入框。

  • l***@sina.com (作者)

    在不改变任何样式的情况苹果是可以的,android 具体怎么修改老师,是否有代码呢?


    2018-01-09 14:56

  • l***@sina.com (作者)

    老师你好,我又提交了一个demo:muilogin_NEW.rar 你看一下?


    2018-01-09 16:48

Neil_HL

Neil_HL

var initialHeight = window.innerHeight,  
	wrapper = document.querySelector(".mui-scroll-wrapper");  
window.onresize = function(){  
	var heightDiffer = window.innerHeight - initialHeight;  
	console.log("高度的差"+heightDiffer);  
	wrapper.style.top = heightDiffer + 'px';//需要判断下此时软键盘弹起时是否会挡住当前获得焦点的输入框,挡住才执行这句,没挡住就不需要执行  
}

该问题目前已经被锁定, 无法添加新回复