javascript - 各位大佬们， uni-app 中可以监听 uni-esayinput 的光标移动事件吗？

Question

就像QQ的聊天输入框一样，我先输入十个字，然后把光标移动到第三个字后面，这时候我想记录一下光标的位置，然后在当前位置插入一个emoji表情，
请问有这种事件吗？
今天我尝试了focue和input事件，貌似都不太行！
主要的代码：

      <uni-easyinput
        v-if="sendMsgWay === 0"
        class="builder-main__content"
        confirmType="send"
        ref="easyInput"
        :placeholder="placeholder"
        :clearable="false"
        v-model="message"
        @input="onInput"
        @focus="onInputFocus"
        @blur="onInputBlur"
        @confirm="onSendMessage"
      />

const cursorPosition = ref({})
//记录光标位置
const updateCursorPosition = ()=>{
  uni.getSelectedTextRange({
    success: res => {
      cursorPosition.value = {...res}
    }
  })
}
function onInputFocus(e) {
  updateCursorPosition();
}
function onInputBlur(){
  updateCursorPosition();
}
function onInput(){
  updateCursorPosition();
}

一个主要的现象就是，文字输入完成，移动光标到某个字后面，emoji表情就会插入到文字的最后，这时候我再移动光标，再插入emoji,貌似位置以正确了

Answer 1

这种封装好的组件只能看组件文档 �� uni-easyinput 增强输入框 | uni-app官网

Easyinput Events

事件称名	说明	返回值
@input	输入框内容发生变化时触发	-
@focus	输入框获得焦点时触发	-
@blur	输入框失去焦点时触发	-
@confirm	点击完成按钮时触发	-
@iconClick	点击图标时触发	prefix/suffix

很明显没有提供你需要的API，不过我看组件的源码是有抛出很多不在文档上的事件 �� uni-ui/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue at master · dcloudio/uni-ui

那么如果你是 HBX 创建的项目，可以自己修改 uni_modules 目录下的 uni-easyinput 组件源码。或者不是 HBX 创建的项目也可以自己监听 input 元素的 keydown 事件通过 selectionStart 属性来获取光标位置。

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
const cursorPosition = ref('blur')

const getCursorPosition = (e) => {
  cursorPosition.value = e.target?.selectionStart
}
const handleBlur = () => {
  cursorPosition.value = 'blur'
}
</script>

<template>
  <input v-model="msg" @keydown="getCursorPosition" @focus="getCursorPosition" @blur="handleBlur"/>
  <h2>当前光标位置：{{ cursorPosition }}</h2>
</template>

但是我不太确定 uni-app 的场景下是否有 selectionStart 这个属性。

Answer 2

在 uni-app 中，uni-easyinput 组件并不是 uni-app 官方提供的原生组件，而是可能来自某个第三方的库或者自定义组件。由于 uni-easyinput 不是官方组件，其行为和事件可能会与官方组件有所不同，且可能不支持直接监听光标位置移动的事件。

不过，基于你尝试的 uni.getSelectedTextRange API，这是一个在原生小程序中用于获取文本输入框（如 input、textarea）的光标位置的方法。在 uni-app 中，如果你想要模拟这样的行为，你可能需要在自定义的 uni-easyinput 组件中增加对光标位置的支持，或者直接使用原生的 textarea 组件（如果 uni-easyinput 允许的话）。

以下是一个基于 textarea 的例子，演示了如何获取和更新光标位置，并在光标位置处插入文本（如 emoji 表情）：

<template>
  <view>
    <textarea 
      ref="myTextarea" 
      v-model="message" 
      @input="handleInput" 
      @focus="handleFocus"
      @blur="handleBlur"
      placeholder="请输入内容..."
    ></textarea>
    <button @click="insertEmoji">插入 Emoji</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      cursorPosition: { start: 0, end: 0 },
    };
  },
  methods: {
    handleInput(e) {
      this.updateCursorPosition();
    },
    handleFocus(e) {
      this.updateCursorPosition();
    },
    handleBlur(e) {
      this.updateCursorPosition();
    },
    updateCursorPosition() {
      uni.getSelectedTextRange({
        success: (res) => {
          this.cursorPosition = res;
        },
      });
    },
    insertEmoji() {
      const emoji = '��'; // 假设这是你想要插入的 emoji
      const startPos = this.cursorPosition.start;
      const endPos = this.cursorPosition.end;
      // 插入 emoji 到光标位置
      this.message = this.message.slice(0, startPos) + emoji + this.message.slice(endPos);
      // 更新光标位置到 emoji 后面
      this.cursorPosition = { start: startPos + emoji.length, end: startPos + emoji.length };
      // 触发 textarea 重新聚焦，以便光标位置更新
      this.$nextTick(() => {
        this.$refs.myTextarea.focus({ success: () => {
          uni.setSelectionRange({
            inputId: this.$refs.myTextarea.getInputId(),
            start: startPos + emoji.length,
            end: startPos + emoji.length,
          });
        }});
      });
    },
  },
};
</script>

在上面的代码中，我们使用了 textarea 组件的 input、focus 和 blur 事件来更新光标位置。然后，我们有一个 insertEmoji 方法，它在当前光标位置插入一个 emoji，并更新光标位置到 emoji 后面。

注意，你可能需要根据实际的 uni-easyinput 组件的特性和 API 来调整上面的代码。如果 uni-easyinput 组件不支持类似的功能，你可能需要考虑替换为原生组件或者修改 uni-easyinput 组件的源码来添加这些功能。