uniapp input框扫码输入后如何让光标不留在框内

在uniapp中，使用input框扫码输入后，光标会自动停留在输入框内。请问如何实现在扫码完成后让光标自动移出或隐藏，避免键盘持续弹出？尝试过blur()方法但效果不理想，是否有其他解决方案或需要特殊配置？

2 回复

在input扫码后，调用blur()方法让输入框失去焦点即可。

示例代码：

// 扫码后执行
this.$refs.inputName.blur()

或者在扫码回调中直接操作DOM元素：

document.activeElement.blur()

这样光标就不会停留在输入框内了。


在 UniApp 中，当 input 框通过扫码功能输入内容后，光标默认会停留在输入框内。要让光标不留在框内，可以通过以下方法实现：

方法一：使用 blur() 方法

在扫码输入完成后，手动调用输入框的 blur() 方法，使输入框失去焦点，光标自然消失。

示例代码：

<template>
  <view>
    <input 
      ref="inputRef" 
      v-model="scanValue" 
      placeholder="点击扫码" 
      @confirm="onScanConfirm"
    />
    <button @click="startScan">开始扫码</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scanValue: ''
    };
  },
  methods: {
    startScan() {
      // 调用扫码API（示例为H5环境，实际需用uni.scanCode）
      // 模拟扫码完成后的回调
      uni.scanCode({
        success: (res) => {
          this.scanValue = res.result;
          this.$nextTick(() => {
            this.$refs.inputRef.blur(); // 使输入框失去焦点
          });
        }
      });
    },
    onScanConfirm() {
      // 处理输入确认逻辑
    }
  }
};
</script>

方法二：扫码后隐藏输入框

如果业务允许，可以在扫码完成后直接隐藏输入框，或将其设置为不可聚焦。

示例代码：

<template>
  <view>
    <input 
      v-if="showInput" 
      v-model="scanValue" 
      focus 
    />
    <button @click="startScan">开始扫码</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showInput: false,
      scanValue: ''
    };
  },
  methods: {
    startScan() {
      uni.scanCode({
        success: (res) => {
          this.scanValue = res.result;
          this.showInput = false; // 隐藏输入框
        }
      });
    }
  }
};
</script>

注意事项：

  1. 平台差异：在部分安卓设备上，blur() 方法可能响应较慢，建议使用 $nextTick 确保 DOM 更新后执行。
  2. 扫码 API：实际开发中需使用 uni.scanCode 实现扫码功能，并根据回调结果处理输入内容。
  3. 用户体验：若需用户再次编辑，可结合业务逻辑重新聚焦（如通过按钮触发 focus()）。

选择适合业务场景的方法即可解决问题。

回到顶部