web页面移动端键盘弹出后对页面布局的影响

1.由于弹出键盘后屏幕的高度会发生改变,所以页面的绝对/固定定位布局会受到影响

2.键盘弹出后输入框被遮挡掉了,需要设置定时器在输入框聚焦200ms后调用红框区域的标签的scrollIntoView(true)和scrollIntoViewIfNeeded()使输入框显示在可视区域内

             

3.键盘弹出后页面发生滚动,若不想然页面滚动可设置定时器在输入框聚焦200ms后把页面的滚动位置重置为0px

原文地址:https://www.cnblogs.com/chenxiangling/p/8986482.html

时间: 2024-11-06 07:13:46

web页面移动端键盘弹出后对页面布局的影响的相关文章

周记3——解决fixed属性在ios软键盘弹出后失效的bug

这周在做空间("类似"qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大部分情况把fixed变成了absolute.为什么说是绝大部分情况下而不是100%,后面会提到.下面介绍2种方案... 1.css布局 (推荐) 解决思路:既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么假如--页面不会过长出现滚动,那么即便 f

iOS Dev (54) 键盘弹出后收起时View随之移动

iOS Dev (54) 键盘弹出后收起时View随之移动 作者:大锐哥 博客:http://prevention.iteye.com - 添加监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeContentViewPosition:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter d

Android软键盘弹出时把布局顶上去的解决方法

原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在mainfest.xml中,对那个Activity加: <activityandroid:name=".activity.HomeActivity"android:windowSoftInputMode="adjustPan|stateHidden"></ac

移动端文本框被原生键盘弹出后挡住文本框

html: <input id="val_name" type="text" placeholder="姓名"  onfocus="fup(val_name)" onblur="fdown(val_name)" > js: function fup(id){ setTimeout(function () { id.scrollIntoView(true); },100) } function f

Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题

做WebApp页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样: 这个时候,可以给 底下的 Button 或者包含这个Button的Div  添加一个CSS样式:z-index: -1

关于ListView中EditText在软键盘弹出后的焦点问题

转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. 解决办法:在getView()方法中添加监听器: editText.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEve

1129 web和wap端发版后--部分页面存在安全漏洞

0181129 web版本部分页面存在安全漏洞 1.SQL 注入例如在查询功能,输入分号 感叹号 分号 竖杠 ' ! ; |  搜索时,响应结果不正确,应该与图二的响应结果一致 2.跨站脚本漏洞 持久性XSS(Persistentcross-sitescripting),指的是恶意脚本代码被存储进被攻击的数据库,当其他用户正常浏览网页时,站点从数据库中读取了非法用户存入非法数据,恶意脚本代码被执行.    这种攻击类型通常在留言板等地方出现,如下:    那么什么是反射型XSS呢?      

HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法

$('body').height($('body')[0].clientHeight); 以上是背景即BODY被顶起的解决办法. 如果是footer被顶起,则可以用判断解决, $('input').focus(function(){ $('.share').css('display','none'); }) $('input').blur(function(){ $('.share').css('display','block'); })

[iOS]键盘弹出后收回去

func textFieldShouldReturn(textField: UITextField) -> Bool { textField.resignFirstResponder() //由于delegate 的原因 所有方法跟delegate都是相对的 return true } override func touchesEnded(touches: NSSet, withEvent event: UIEvent) { todoItem.resignFirstResponder() } 方