javascript - iphone的safari在input框focus时, 下面会多出70px问题
PHP中文网
PHP中文网 2017-04-11 11:48:45
0
1
376

页面是这样的

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

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

代码如下

     测试safari的高度  
   

PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信 (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(); });

题主可以试一下。;)

いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!