当输入框被软键盘挡住的处理方法-JZTXT

一、现象

在真机中，当光标作用信息发送框唤起软键盘时，键盘会把输入框盖住一大半。如图：

　　唤起前：唤起后：

二、解决

　　1、输入框设置adjust-position=“false”属性（adjust-position为表单组件键盘弹起时，是否自动上推页面）

　　2、当输入框获得焦点时，获取软键盘的高度

　　3、给输入框设置与底部的距离为软键盘的高度

　　4、当输入框失去焦点时，重新设置输入框与底部的默认值

　　5、完成

　　输入框html代码如：

<view class="chat_footer" :style="{ bottom: keyboardHeight }">
    <textarea
        v-model="formData.message"
        :fixed="true"
        adjust-position="false"
        @focus="onFocus"
        @blur="onBlur"
        placeholder="请输入"/>
    <button type="primary" size="mini">发送</button>
</view>

作用输入框的脚本方法如：

methods: {
    // 当输入框获得焦点时
    onFocus (e) {
        // 如果存在软键盘的高度
        e.target.height && (this.keyboardHeight = e.target.height + 'px')
    },
    // 当输入框失去光标时
    onBlur () {
        this.keyboardHeight = 0
    }
}

　　基础样式如：

.chat_footer {
    position: fixed;
    bottom: 0;
}

　　效果为：

三、总结

这操作方法在单个输入框进行发送信息时会常用到。