编写一个指令（v-focus2end）使输入框文本在聚焦时焦点在文本最后一个位置-编程知识

编写一个指令（v-focus2end）使输入框文本在聚焦时焦点在文本最后一个位置

项目反馈输入框内容比较多时候，让鼠标光标在最后一个位置，心想什么奇葩需求，后面试了一下，是有点影响体验，于是就有了下面的效果，我目前的项目都是若依的架子，用的是vue2版本。vue3的朋友想要使用，自行调节

效果图如下：

在这里插入图片描述

使用方法：

前提是指令被注册，代码不显示注册内容

<el-input v-focus2end v-model="dialog.form.actionSign" placeholder="请输入" clearable />

v-focus2end 指令

还能继续优化，我就不想在操作了

/*** Copyright ©* # v-focus2end* @author: zw* @date: 2023-07-17*/export default {inserted(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.addEventListener('focus', focusEventListener.bind(input), false)input.addEventListener('blur', blurEventListener.bind(input), false)el.__focusEventListener = focusEventListenerel.__blurEventListener = blurEventListener},unbind(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.removeEventListener('focus', el.__focusEventListener, false)input.removeEventListener('blur', el.__blurEventListener, false)},
}function focusEventListener(e) {e.preventDefault()setTimeout(() => {const inputLength = this.value.lengththis.setSelectionRange(inputLength, inputLength)smoothMove.call(this)}, 300)
}function blurEventListener() {this.removeEventListener('focus', focusEventListener, false)
}function smoothMove() {const scrollMax = this.scrollWidth - this.clientWidthconst duration = 300const startTime = performance.now()function smoothScroll(timestamp) {const elapsedTime = timestamp - startTimeconst progress = Math.min(elapsedTime / duration, 1)const scrollPosition = progress * scrollMaxthis.scrollLeft = scrollPositionif (elapsedTime < duration) {requestAnimationFrame(smoothScroll.bind(this))}}requestAnimationFrame(smoothScroll.bind(this))
}