小程序键盘的自动弹出和收起

Posted 2023-05-09

参考技术A 我们在进入某个页面时，希望可以定位到某一个Input输入框中，并且实现软键盘自动弹出，在小程序中如何实现呢？

这里我们主要使用到属性是Input控件中的focus属性，我们将focus的值设为 true是，自动获得焦点同时弹起键盘

这里需要用到wx.hideKeyboard()方法，比如我们想实现用户输入123后自动收起键盘，实现方式如下
wxml文件中

js文件中

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~

移动端判断键盘弹出和收起

根据键盘的展开和收起我们可以判断页面的可视区域的高度来操作，具体代码是这样的

    const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.addEventListener(‘resize‘, () => {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight < originHeight) {
        console.log(‘键盘弹起‘)
      } else {
        this.$refs.input.blur()
          console.log(‘键盘关闭‘)
      }
    }, false);

 

通过判断页面的高度我可以可以处理一下问题

1. 当键盘收起的时候让表单失去焦点（注：iOS键盘收起表单会自动失去焦点，但是安卓键盘收起并不会让表单失去焦点）

2. 当键盘展开时让页面滚动，防止内容被遮挡起来导致页面无法操作

 

解决了表单的失去焦点问题，其实表单还有一个问题就是，需要让input滚动到可视区域，方便用户正常输入，可以使用下面代码解决

    window.addEventListener(‘resize‘, function() { 
      if( 
        document.activeElement.tagName === ‘INPUT‘ || 
        document.activeElement.tagName === ‘TEXTAREA‘ 
      ) { 
        window.setTimeout(function() { 
          if(‘scrollIntoView‘ in document.activeElement) { 
            document.activeElement.scrollIntoView(); 
          } else { 
            document.activeElement.scrollIntoViewIfNeeded(); 
          } 
        }, 0); 
      } 
    });