各位大佬们， 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 这个属性。