重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
html5的导出软键盘要做监听处理,就是click和keydown事件做绑定。然后调用响应的video函数就好了。诸如video.parse()
创新互联专注于宜阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供宜阳营销型网站建设,宜阳网站制作、宜阳网页设计、宜阳网站官网定制、微信小程序开发服务,打造宜阳网络公司原创品牌,更为您提供宜阳网站排名全网营销落地服务。
移动web聊天页面,输入框在底部的时候,点击输入,弹起软键盘,iOS在将页面推上的时候会回弹一下,导致键盘刚好遮挡到输入框。
初次触发输入框的focus的时候,iOS 键盘默认是以英文键盘高度推上页面,但一般我们的默认输入是中文,会导致软键盘的高度变化,中文输入键盘高度高于英文,所以导致了遮挡。
Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。
当键盘在切换中英输入法时,键盘高度变化仍然会引起键盘遮挡
监听输入框的 focus 、 blur 事件,当聚焦时,循环调用 input.scrollIntoViewIfNeeded 方法。
当监听到 blur 时,停止循环。
用CSS可以实现效果。代码如下:html{height:100%;} body{height:100%;overflow:hidden;}//overflow:hidden为隐藏滚动条 body{overflow:scroll;}//如果内容高度大于屏幕就会显示滚动条HTML5 是下一代的 HTML。
给输入框放在html这层,然后给html相对定位,height:100%;width:100%,再给输入框绝对定位到bottom:0;left:0;这时候输入框在键盘弹出的时候会跳到输入框的上面。
解决方法
1、scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。
2、alignWithTop 若为 true,或者什么都不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
3、alignWithTop 若为 false,调用元素会尽可能全部出现在视口中,可能的话,调用元素的底部会与视口顶部平齐,不过顶部不一定平齐。
4、该方法是唯一一个所有浏览器都支持的方法,类似还有如下方法,但是只有在Chrome和Safari有效。
5、代码如下:
6、再次测试,效果如下:
7、相比于input被挡住,突兀地出现在页面中间更加可以令人接受,但是多次测试,仍然存在问题:当切换输入法的时候,input框的位置会往下移动,被键盘挡住一部分,而且出现的概率比较高(中英文切换),效果如下:
8、当软键盘被唤起是,使用 scrollTop() 方法使input元素滚动到指定的位置,但是滚动的具体数值需要调试才能给出,所以这里就不再演示了。