vue点击输入框弹出软键盘

### Vue 中实现点击输入框弹出软键盘

在 Vue 项目中，通过 HTML 的 `input` 元素结合 Vue 的数据绑定、事件监听以及条件渲染等功能，能够轻松实现点击输入框时自动弹出软键盘的效果。下面提供了一种简单的方式来进行此功能开发。

#### 使用 v-model 和 @focus/@blur 绑定逻辑处理

为了更好地管理状态变化，在组件内部定义布尔类型的变量用于追踪当前是否处于聚焦状态，并利用计算属性或侦听器监测该值的变化以便执行相应动作：

<template>
  <div class="container">
    <!-- input元素 -->
    <input type="text" ref="myInput" :value="inputValue" @focus="onFocus" @blur="onBlur"/>
    
    <!-- 自定义虚拟键盘 (可根据需求自定义样式和布局)-->
    <transition name="slide-fade">
      <div v-if="isKeyboardVisible" class="virtual-keyboard">Virtual Keyboard</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isKeyboardVisible: false,
      defaultHeight: null,
      nowHeight: null
    };
  },
  
  mounted(){
     // 记录初始高度
     this.defaultHeight = document.documentElement.clientHeight;
     
     // 添加resize事件监听以检测键盘弹出情况
     window.addEventListener('resize', () => {this.nowHeight = document.documentElement.clientHeight});
  },

  methods:{
    onFocus(event){
        this.isKeyboardVisible=true;

        // 如果存在高度差异，则认为是由于键盘弹出引起的变动
        if(this.defaultHeight !== this.nowHeight){
            setTimeout(()=>{
                event.target.scrollIntoView({behavior:'smooth'});
                
                const scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
                window.scrollTo(0,scrollTop+100);
            },200);
        }
        
    },
    onBlur(){
       this.isKeyboardVisible=false;
       
       // 当失去焦点后重置页面位置
       window.scrollTo(0,this.defaultHeight-this.nowHeight);
    }
  }

}
</script>

<style scoped>
/* 这里可以添加动画效果 */
.slide-fade-enter-active {
  transition: all .3s ease-out;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter-from,.slide-fade-leave-to{
  transform: translateY(-20px);
  opacity: 0;
}
.virtual-keyboard{
  position:absolute;
  bottom:0;
  width:100%;
  background-color:#f9f9f9;
  border-top:solid 1px #ccc;
  padding:20px;
  box-shadow:0 -2px 4px rgba(0,0,0,.1);
}
</style>

上述代码片段展示了如何创建一个响应式的表单控件，当用户点击输入框(`@focus`)时会触发特定的行为——即展示模拟的软件盘界面；而一旦离开输入域(`@blur`)则隐藏它[^1]。 同时也考虑到了移动端浏览器特性，加入了对于视窗大小改变后的适配措施，确保即使有物理/虚拟键盘出现也不会影响用户体验[^2][^3]。