uniapp input 光标位置在输入时如何获取

在uniapp开发中，如何获取input组件在输入时的光标位置？我尝试用@input事件，但只能获取到输入内容，无法直接获取光标位置。是否有类似原生input的selectionStart/selectionEnd属性？或者需要通过其他方法实现？请提供具体代码示例。

2 回复

在uniapp中，获取input光标位置可以通过@input事件配合selectionStart和selectionEnd属性实现。示例：

handleInput(e) {
  const cursorPos = e.detail.cursor;
  console.log('光标位置:', cursorPos);
}

注意：部分平台可能不支持，建议测试兼容性。


在 UniApp 中，可以通过 input 组件的 @input 事件获取光标位置。使用 event.detail.cursor 属性即可获取当前光标的位置（从 0 开始的索引值）。

示例代码：

<template>
  <view>
    <input 
      type="text" 
      v-model="inputValue" 
      @input="onInput" 
      placeholder="请输入内容"
    />
    <text>光标位置：{{ cursorPosition }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      cursorPosition: 0
    }
  },
  methods: {
    onInput(event) {
      this.cursorPosition = event.detail.cursor;
    }
  }
}
</script>

说明：

  • @input 事件在输入内容时触发。
  • event.detail.cursor 返回当前光标在输入框中的位置。
  • 适用于实时获取光标位置，例如实现自定义输入验证或动态提示。

注意：

  • 仅支持 input 组件，且在某些平台（如部分安卓设备）可能存在兼容性差异。
  • 若需兼容性更好，可考虑使用 @blur 或 @focus 事件结合其他逻辑处理。
回到顶部