兼容性ios、安卓值input 以及fixed

最新推荐文章于 2023-08-01 18:10:11 发布

原创最新推荐文章于 2023-08-01 18:10:11 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

随笔同时被 3 个专栏收录

10 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

#日常踩坑

4 篇文章

订阅专栏

本文探讨了iOS和Android系统中输入框上滑机制的区别，以及由此引发的兼容性问题。在iOS中，键盘弹起时可视窗口向上顶，而Android则缩小可视窗口。对于iOS的输入框被遮挡问题，作者提供了添加事件监听的解决方案，而在Android端，`document.activeElement.scrollIntoViewIfNeeded()`方法通常有效，但可能需要针对特定场景调整。文章还分享了部分代码示例来解决键盘收起后的页面滚动问题。

1.好久没解决兼容性的问题了。

研究了ios系统的上滑机制和安卓的上滑机制他是不一样的；

ios：是可视窗口向上顶上去了。

安卓：是可视窗口缩小了。

fixed定位ios只能依靠客户端了。这里不想多说啥。js解决不了。除非改造系统去吧。

首先判断ios安卓机型代码如下：

var ua = window.navigator.userAgent.toLocaleLowerCase();

var isIOS = /iphone|ipad|ipod/.test(ua);

var isAndroid = /android/.test(ua);

ios存在问题：场景：一个页面有好多个input框；input拉起软键盘 - 收起的时候，input框会被遮挡。

经过反复自测：得出的结论

下面的$input是document.querySelectorAll('.ininput');
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 
var oldh = 0;//初始化scrollTop位置
if (!isAndroid) {
 // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
  $input.addEventListener('focus', function () {
      console.log('IOS 键盘弹起啦！');
      oldh = document.documentElement.scrollTop || document.body.scrollTop || 0;//
 }, false)

 // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
 $input.addEventListener('blur', () => {
    console.log('IOS 键盘收起啦！'); 
    // IOS 键盘收起后操作
    setTimeout(() => { 
         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        var jp = scrollHeight-oldh;
        window.scrollTo(0, document.documentElement.scrollTop-jp);
    }, 500); 
  })
 }

微信ios中：拉起软键盘回复到原位置的问题网络上是这么描述的我这里不是很赞同，这里其实是解决当软键盘收起之后输入框下面的留白用这个可以解决：

$("input,select").blur(function(){

  setTimeout(function(){ 
    
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

      window.scrollTo(0, Math.max(scrollHeight - 1, 0));

    }, 100
 );

})

接下来说说安卓的，安卓：键盘拉起可视窗口会变小。

场景：拉起输入框的时候会被遮挡。

查看了网上的说法也是用：document.activeElement.scrollIntoViewIfNeeded();

还是可用的，但是针对一些特殊的场景还是需要根据实际情况加工一下的。