如何便捷给input施加focus方法？

站长

2024年06月25日 08:48 · 阅读数 4

有以下代码，获取input焦点时将光标置在右侧的，现在项目有很多地方需要用上，请问怎么快速、简单的修改

@focus="inputFocusRight($event)"

   inputFocusRight(e) {
        const editTask = e.srcElement;
        const length = editTask.value.length;
        editTask.focus();

        setTimeout(() => {
          editTask.selectionStart = length;
          editTask.selectionEnd = length;
        });
      },

1个回答

test

2024-06-25

全局自定义指令：

// main.js 
Vue.directive('focus-right', {
  inserted: function (el) {
    el.addEventListener('focus', function () {
      const length = el.value.length;
      setTimeout(() => {
        el.selectionStart = length;
        el.selectionEnd = length;
      });
    });
  }
});

在组件里：

<input v-focus-right>

或者插件：

// focusPlugin.js
const FocusRightPlugin = {
  install(Vue) {
    Vue.prototype.$inputFocusRight = function (e) {
      const input = e.target;
      const length = input.value.length;
      setTimeout(() => {
        input.selectionStart = length;
        input.selectionEnd = length;
      });
    };
  }
};

// 在 main.js 里
import FocusRightPlugin from './focusPlugin';

Vue.use(FocusRightPlugin);

// 然后在组件里用
<input @focus="$inputFocusRight">

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容