uni-app iOS键盘点击空白处收起键盘时获取不到输入的值

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app iOS键盘点击空白处收起键盘时获取不到输入的值

用uniapp开发,vue文件中的unput组件,iOS手机上默认打开中文键盘,输入字母的时候,点击空白处收起键盘,input组件中有字母和空格的组合,但是获取不到输入的字母值(打印绑定的值是空)

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20201013/4fd91707f24ddaa3d78c133c0804cd56.jpg

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20201013/6594386da6b6c3301b80a5ff6b84ad03.jpg


2 回复

用uniapp开发,vue文件中的input组件,iOS手机上默认打开中文键盘,输入字母的时候,点击空白处收起键盘,input组件中有字母和空格的组合,但是获取不到输入的字母值(打印绑定的值是空)


在uni-app开发中,iOS设备上键盘点击空白处收起时无法获取输入框的值确实是一个常见的问题。这通常是因为键盘收起的事件触发时机和输入框值更新的时机不一致导致的。我们可以通过监听键盘收起事件并在事件处理函数中获取输入框的值来解决这个问题。

以下是一个示例代码,展示了如何在uni-app中实现这一功能:

  1. 在页面的<template>部分定义一个输入框和一个用于显示输入值的标签
<template>
  <view class="container">
    <input 
      type="text" 
      v-model="inputValue" 
      @blur="handleBlur" 
      @input="handleInput" 
      placeholder="请输入内容"
    />
    <view class="value-display">{{ inputValue }}</view>
  </view>
</template>
  1. 在页面的<script>部分定义相关的数据和事件处理函数
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleBlur(event) {
      // 在输入框失去焦点时也可以尝试获取值,但这里主要用于处理其他逻辑
      console.log('Input blurred:', this.inputValue);
    },
    handleInput(event) {
      // 实时更新inputValue
      this.inputValue = event.target.value;
    },
    handleKeyboardHide() {
      // 监听键盘收起事件,这里假设你已经有方法监听键盘事件
      // uni-app没有直接的键盘收起事件,但可以通过页面尺寸变化等间接监听
      // 这里仅作为示例,实际实现需要根据你的具体场景
      console.log('Keyboard hidden, current input value:', this.inputValue);
      // 可以在这里执行你需要的逻辑,比如提交表单等
    }
  },
  onReady() {
    // 监听页面尺寸变化,用于间接监听键盘的显示和隐藏
    const page = this;
    uni.onWindowResize(() => {
      // 判断键盘是否收起,具体逻辑根据实际需求调整
      // 假设键盘收起后页面高度会增加,这里简单判断高度变化
      const currentHeight = uni.getSystemInfoSync().windowHeight;
      if (page.prevHeight && currentHeight > page.prevHeight) {
        // 键盘收起
        page.handleKeyboardHide();
      }
      page.prevHeight = currentHeight;
    });
    // 初始化页面高度
    this.prevHeight = uni.getSystemInfoSync().windowHeight;
  }
};
</script>
  1. 在页面的<style>部分添加一些基本的样式
<style scoped>
.container {
  padding: 20px;
}
.value-display {
  margin-top: 20px;
  font-size: 16px;
}
</style>

注意:上述代码中,handleKeyboardHide方法是一个示例,实际上uni-app没有直接提供键盘收起事件。你可以通过监听页面尺寸变化或其他方式间接实现键盘收起的监听。具体实现方式可能需要根据你的项目需求进行调整。

回到顶部