uniapp @touchend 不让键盘弹出如何解决？

在uniapp中，使用@touchend事件时，如何阻止键盘自动弹出？目前触摸结束后总会触发键盘显示，影响用户体验，有没有办法禁用这个默认行为？

2 回复

在 @touchend 事件中调用 event.preventDefault() 阻止默认行为即可：

<view @touchend="handleTouchEnd"></view>

handleTouchEnd(e) {
  e.preventDefault()
  // 其他逻辑
}

这样就能防止键盘弹出了。


在 UniApp 中，当 @touchend 事件触发时，如果输入框处于焦点状态，键盘可能会自动弹出。要阻止键盘弹出，可以通过以下方法解决：

1. 使用 @touchstart 替代 @touchend

将事件绑定到 @touchstart，避免在触摸结束时触发输入框的焦点。

<template>
  <view @touchstart="handleTouchStart">
    <!-- 其他内容 -->
  </view>
</template>

2. 在 @touchend 中主动失焦

如果必须使用 @touchend，可以在事件处理函数中手动让输入框失去焦点。

<template>
  <input v-model="inputValue" ref="inputRef" />
  <view @touchend="handleTouchEnd">
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchEnd() {
      this.$refs.inputRef.blur(); // 让输入框失焦
    }
  }
}
</script>

3. 阻止默认行为

在 @touchend 事件中调用 preventDefault()，但注意在某些平台上可能无效。

<template>
  <view @touchend="handleTouchEnd">
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchEnd(e) {
      e.preventDefault(); // 尝试阻止默认行为
    }
  }
}
</script>

4. 动态控制输入框的 disabled 或 readonly 属性

在触摸操作期间临时禁用输入框。

<template>
  <input v-model="inputValue" :disabled="isDisabled" />
  <view @touchstart="disableInput" @touchend="enableInput">
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false
    };
  },
  methods: {
    disableInput() {
      this.isDisabled = true;
    },
    enableInput() {
      this.isDisabled = false;
    }
  }
}
</script>

总结

推荐使用 方法1（@touchstart 替代） 或 方法2（手动失焦），简单有效。根据实际场景选择合适方案即可。

回到顶部