移动web 怎么捕获虚拟键盘弹出和关闭事件

Posted 2023-05-09

1、当虚拟键盘弹出的时候，window的resize事件会被触发，问题里的input是使用position:fixed吗，如果是position: fixed，在resize触发时应该会自动调整位置吧。

2、以下js可以实现此效果：

var wHeight = windows.innerHeight;   //获取初始可视窗口高度

$(window).resize(function()         //监测窗口大小的变化事件

var hh = windows.innerHeight;     //当前可视窗口高度

var viewTop = $(window).scrollTop();   //可视窗口高度顶部距离网页顶部的距离

if(wHeight > hh)           //可以作为虚拟键盘弹出事件

$("body,html").animate(scrollTop:viewTop+100);    //调整可视页面的位置

else         //可以作为虚拟键盘关闭事件

$("body,html").animate(scrollTop:viewTop-100);

wHeight = hh;

);

参考技术A 当虚拟键盘弹出的时候，window的resize事件会被触发（至少我的android手机是这样）

问题里的input是使用position:fixed吗，如果是position: fixed，在resize触发时应该会自动调整位置吧。

// 以下代码用于直接将文档流中的元素移动到视区内，Android5.0+有效(只测了5.0和5.1，其他未知)，ios没测过。

element.scrollIntoView()

====================================================================
监听input元素的focus事件，以及window的resize事件。因为focus事件将在resize事件前触发。
在focus事件中，将获得焦点的input元素保存变量中。
在resize事件中，获得浏览器可视区域的top和bottom。
获得浏览器可视区域的位置：

var viewTop = $(window).scrollTop(), // 可视区域顶部
viewBottom = viewTop + window.innerHeight; // 可视区域底部

// 不使用jQuery

var viewTop = document.body.scrollTop,
viewBottom = viewTop + window.innerHeight;

获得元素的在文档中的位置：

var elementTop = $element.offset().top, // $element是保存的input
elementBottom = elementTop + $element.height();

// 不使用jQuery

/* 获得元素的位置信息 */
var getElementPosition = function(elem)
var defaultRect = top: 0, left: 0;
var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;
var ret =
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft

return ret;

var elementTop = getElementPosition(element).top, // 元素顶部位置
elementBottom = elementTop + element.clientHeight; // 元素底部位置

// 小结一下
document.body.scrollTop获得当前body滚动的位置。
getBoundingClientRect()获得element相对于viewport的位置
从上面的代码中看到其实：
判断元素是否在可视区域内，直接使用element.getBoundingClientRect()就好(*￣∇￣*)

调整视窗位置

$(window).scrollTop(value); // 调整value

// 不使用jQuery

window.scrollTo(0, value); // 调整value

调整到想要的效果。

我的Android手机上，当input获得焦点的时候，浏览器好像会自动移动input到可视区域内。

flutter 监听软键盘的弹出和关闭

官方有一个keyboard_visibility 插件,但是不推荐用问题很多 （好像作者已经不更新了 而且编译会导致build.gradle 报错） 

https://pub.dev/packages/keyboard_visibility

需要监听软键盘的弹出和隐藏 主要用  WidgetsBindingObserver 这个继承类

...
class BottomKeyboardInputState extends State<BottomKeyboardInput> with WidgetsBindingObserver {  

  @override
  void initState() {
    // TODO: implement initState
   
    super.initState();
    //初始化
    WidgetsBinding.instance.addObserver(this);
   }



     @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
       

          if(MediaQuery.of(context).viewInsets.bottom==0){
            //关闭键盘

             
           }else{
            //显示键盘
          }
 
        

      });
    });
  }




   @override
  void dispose() {
    // TODO: implement dispose
    //销毁
    WidgetsBinding.instance.removeObserver(this);

    super.dispose();
  }

}
...

 

//注意  

MediaQuery.of(context).viewInsets.bottom获取键盘高度如果无论如何都是0 就查看父级组件的

 child: Scaffold(
              resizeToAvoidBottomInset:false,//只要子组件需要监听键盘高度  父组件的所有该属性都应该设置false
              appBar: CenterTitleAppBar(
                title: ‘页面title‘,
              ),
              body: ContentPage(),
 ),

 

 可以参考拓展

https://blog.csdn.net/weixin_34082177/article/details/91370675