vue.JS input光標右對齊的優雅解決方案
在vue項目開發中，常需將input光標定位到文本末尾。 如果每個input都單獨處理，代碼冗余且難以維護。本文介紹兩種高效方法：自定義指令和Vue插件。
方法一：自定義指令
此方法通過創建全局自定義指令v-focus-right來實現。
首先，在main.js (或入口文件)中定義指令：
立即學習“前端免費學習筆記（深入）”；
// main.js Vue.directive('focus-right', { inserted: function (el) { el.addEventListener('focus', function () { const length = this.value.length; setTimeout(() => { // 使用setTimeout確保dom更新完成 this.setSelectionRange(length, length); }); }); } });
然后，在需要右對齊光標的input元素上直接使用指令：
<template> <input type="text" v-focus-right> </template>
這樣，所有使用v-focus-right指令的input元素都會自動將光標置于文本末尾。
方法二：Vue插件
此方法將光標右對齊功能封裝成一個Vue插件，更易于復用和管理。
創建focusPlugin.js文件：
// focusPlugin.js const FocusRightPlugin = { install(Vue) { Vue.prototype.$focusRight = function (el) { const length = el.value.length; setTimeout(() => { el.setSelectionRange(length, length); }); }; } }; export default FocusRightPlugin;
在main.js中引入并使用插件：
// main.js import FocusRightPlugin from './focusPlugin'; Vue.use(FocusRightPlugin);
在組件中使用：
<template> <input type="text" ref="myInput"> </template> <script> export default { mounted() { this.$nextTick(() => { // 確保DOM已渲染 this.$focusRight(this.$refs.myInput); }); } }; </script>
兩種方法都能有效解決問題，選擇哪種方法取決于項目規模和個人偏好。自定義指令更簡潔，插件更易于復用和維護。 注意使用setTimeout或$nextTick確保DOM更新后才能正確設置光標位置。 setSelectionRange方法比單獨設置selectionStart和selectionEnd更可靠。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
