网站后台页面设计教程,只有一个人网站开发,龙井建设局网站,怎样学网站建设测试移动端页面的时候#xff0c;偶然发现点击底部input输入框时#xff0c;弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在页面底部#xff0c;如图所示#xff1a; input固定底部设计图.png点击底部input输入框唤起软键盘时#xff0c;软键盘挡住输入框。如图所示… 测试移动端页面的时候偶然发现点击底部input输入框时弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在页面底部如图所示 input固定底部设计图.png 点击底部input输入框唤起软键盘时软键盘挡住输入框。如图所示 点击input键盘挡住图.png 测试过多台真机发现安卓的手机都不会出现这个问题个别的iOS手机有问题。而且同一型号的苹果有的有问题有的没有问题。经过多方的归纳、总结惊奇的发现会出现这个bug的苹果手机使用的都是苹果第三方输入法而使用苹果自带的输入法则没有这个bug。 出现这个bug的时候输入字符的时候input输入框又会滚动上去。沿着这个思路往下想我想到input获取焦点失败、滚动浏览器窗口或容器元素的问题。 解决这个问题的思路是点击input输入框的时候让其input滚动到当前div的顶部。于是我想到了Element.scrollIntoView() 方法。 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域各浏览器实现了相应的方法可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在所以它能在所有元素上使用。 Element.scrollIntoView()语法 code element.scrollIntoView(); // Equivalent to element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean arguments element.scrollIntoView(scrollIntoViewOptions); // Object argument /code 参数alignToTop可选 code Is a Boolean value: If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value. 如果alignToTop为true该元素的顶部将对齐的滚动的祖先的可见区域的顶部。这是默认值。 If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.如果alignToTop false 该元素的底部将对齐的滚动的祖先的可见区域的底部。 /code 点击input底部输入框软键盘挡住输入框的解决办法是点击输入框的时候给input绑定事件使用 Element.scrollIntoView()方法使元素弹到祖元素可见区域的顶部。代码如下 code $(input).on(click, function() { var target this; setTimeOut(function() { target.scrollIntoView(true); }, 100); }) /code 更多专业前端知识请上
【猿2048】www.mk2048.com
