vue.js 在javascript中如何将子字符串移到字符串的末尾?

vfh0ocws  于 2023-02-16  发布在  Vue.js
关注(0)|答案(2)|浏览(203)
// "move [Personal] to end of string
       this.target.name?.replace(/^(.*)( [Personal])(.*)$/gs, "$1$3$2");

我尝试使用vue @keyup处理程序确保“[Personal]”位于字符串末尾。
但它似乎除了减慢打字速度外什么也没做。

zqry0prt

zqry0prt1#

我建议你看看.setSelectionRange方法(source)。该方法允许输入框根据输入值中的选择数量选择一些文本。要将键入光标向左移动11个字符,您可以尝试使用.setSelectionRange(input.value.length - 11, input.value.length - 11)。完整示例:

let endText = ' [Personal]';

let input = document.getElementById('mytext');
input.onkeyup = function() {
  if(input.value.length < endText.length) { 
    input.value += endText;
  } else {
    input.value = input.value.slice(0, endText.length * -1) + endText;
  }
  let targetCursor = input.value.length - endText.length;
  input.setSelectionRange(targetCursor, targetCursor);
}
<input id="mytext" type="text" />
c2e8gylq

c2e8gylq2#

<template>
  <input type="text" v-model="target.name" @keyup="movePersonalToEnd" />
</template>

<script>
export default {
  data() {
    return {
      target: {
        name: ''
      }
    }
  },
  methods: {
    movePersonalToEnd() {
      this.target.name = this.target.name?.replace(/^(.*)( [Personal])(.*)$/gs, "$1$3$2");
    }
  }
}
</script>

下面是一个Vue.js解决方案

相关问题