iphone的safari在input框focus时, 下面会多出70px问题

页面是这样的

https://img.mukewang.com/5bed2b6e00013ad404220758.jpg

当我的键盘定位到输入框时, 加上scrollIntoView()之后, 就成这样了

https://img4.mukewang.com/5bed2b7b000195f704250759.jpg

问题就是为什么safari下input和键盘中间多出来那一块, 这个怎么破, 注: 目测这一块是safari底栏的高度

https://img3.mukewang.com/5bed2b8f000103e205460636.jpg

慕妹3242003
浏览 1267回答 1
1回答

白板的微信

在ios里面,当一个文本框的样式为fixed时候,如果这个文本框获得焦点,它的位置就会乱掉,由于ios里面做了自适应居中,这个fixed的文本框会跑到页面中间。 这也是你说的 “ 多出70px ”的原因。解决办法有两个:可以在文本框获得焦点的时候将fixed改为absolute,失去焦点时在改回fixed,但是这样会让屏幕有上下滑动的体验不太好。.fixfixed {   position:absolute; } $(document)     .on('focus', 'input', function(e) {         $this.addClass('fixfixed');     })     .on('blur', 'input', function(e) {         $this.removeClass('fixfixed');     });还有一种就是用一个假的fixed的文本框放在页面顶部,一个absolute的文本框隐藏在页面顶部,当fixed的文本框获得焦点时候将其隐藏,然后显示absolute的文本框,当失去焦点时,在把absolute的文本框隐藏,fixed的文本框显示。.fixfixed { position:absolute;}$(document)     .on('focus', 'input', function(e) {        $absolute..show();         $this.hide();     })     .on('blur', 'input', function(e) {         $fixed..show();         $this.hide();     });题主可以试一下。;)
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript