javascript - 用户在输入标签中写入后，如何立即将用户英文号码更改为波斯语/阿拉伯语？

Question

我正在使用 Vuejs，我想防止输入标签显示用户的字符并将其替换为我自己的字符(这是一些数字)。

我已经在计算中使用了@onchange 和 Watch 以及 getter 和 setter。问题是字符立即出现在输入中，然后更改为我想要的。

 <input v-model="phonenumber"  id="downloadlink" v- 
    on:keydown="sendDownloadLink"  placeholder=""
    maxlength="11" autocomplete="off"
    >

在方法中:

sendDownloadLink(e){
          this.phonenumber = this.toPersianNum(this.phonenumber);
         }

提前致谢。

Answer 1

这里有几个问题很难克服:

1. 只有 input事件是可靠的。如果通过复制/粘贴或拖放更改值，则不一定会触发键盘事件。
2. input事件在输入更新后触发，因此将看到用户键入的字符，尽管时间很短，直到事件监听器可以更改它们。
3. 如果用户更改值中间的字符，则在更新值以使用新数字时，文本光标的位置将跳到末尾。

解决这个问题的一种方法是使用一种字体来显示字符 0 到 9 所需的数字。这可以避免大部分困难。

下面的代码尝试使用 JavaScript 解决方案。它使用 input事件作为包罗万象。为了防止暂时显示错误字符，它取消了 keypress。事件并对值本身进行必要的更改。在所有情况下，它都会尝试使用 setSelectionRange 保留文本光标的位置。 .

这不是“正确”使用 Vue 的特别好的演示，但我不确定如果不求助于直接 DOM 操作就可以实现该功能。

new Vue({
  el: '#app',

  data() {
    return {
      phoneNumber: ''
    }
  },

  methods: {
    getInputValue() {
      const input = this.$refs.input
      const value = input.value
      const start = input.selectionStart
      const end = input.selectionEnd

      return [
        value.slice(0, start),   // before selection
        value.slice(start, end), // selection
        value.slice(end)         // after selection
      ]
    },

    onInput() {
      this.setInputValue(...this.getInputValue().map(this.toArabicNumerals))
    },

    onKeyPress(ev) {
      ev.preventDefault()

      const [before, , after] = this.getInputValue()
      const keyValue = this.toArabicNumerals(ev.key)

      this.setInputValue(before + keyValue, '', after)
    },

    setInputValue(before, selection, after) {
      const input = this.$refs.input
      const start = before.length
      const end = start + selection.length

      this.phoneNumber = input.value = before + selection + after

      input.setSelectionRange(start, end)
    },

    toArabicNumerals(str) {
      return str.split('').map(chr => {
        if ('0' <= chr && chr <= '9') {
          return String.fromCharCode(+chr + 1632)
        }

        if ('\u0660' <= chr && chr <= '\u0669') {
          return chr
        }

        return ''
      }).join('')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <input
    ref="input"
    :value="phoneNumber"
    @input="onInput"
    @keypress="onKeyPress"
  >
</div>

您可能会发现可以删除 onKeyPress完全听众。在我可用于测试的硬件上，它似乎没有任何区别，但对于速度较慢的机器而言可能并非如此。方法setInputValue更新 <input>直接元素的值，这可能足以在不需要 onKeyPress 的情况下获得所需的结果。 .