在onKeyUp（）上進行格式化，導致光標跳轉到輸入字段的末尾

Question

我是大學新生的新前端開發人員。這是我第一次遇到這樣的問題。我正在研究一個同事代碼，所以我不想過多地更改他的代碼，只是簡單地解決他的代碼問題，而沒有徹底檢修它。

我們有3個輸入方式字段：輸入，電話號碼

1. 輸入字段是用於諸如名稱的自由文本字段。
   
2. 電話字段是一個數字字段，用於在用戶屏幕上實時將數字序列格式化爲帶有（XXX）XXX-XXXX格式的10位電話號碼。
   
3. 數字字段用於像ssn這樣只允許數字的東西。非數字字符被拒絕

所有這三個字段擴展基本格式字段。在這個基本格式字段中，我們有一個onKeyUp（event：Event）函數，每次用戶輸入一個字符時都會調用格式函數。我們這樣做是爲了在鍵入時在手機字段中添加諸如（）之類的內容，並在鍵入時從數字字段中刪除非數字字符。

這裏是問題

通過調用每個格式功能擊鍵我們的光標跳到每次鍵擊後在輸入字段中的值的末尾。因此，如果我在輸入字段中有一個預先存在的名稱：「John Smith」，並且我想返回並編輯該字段以使其看起來像「John Joe Smith」，則在每次擊鍵後，光標會跳轉到字符串的末尾。

我的目標是保持按鍵的格式化，以便電話號碼繼續被格式化，數字字段實時拒絕非數字值，但是我想允許在不插入光標的情況下進行中值編輯每次擊鍵後值的結尾。

有沒有辦法在我調用格式之前捕獲我的光標位置，然後在格式之後返回我的光標位置？或者另一個可能很容易實現的解決方案？

Answer 1

您可以從觸發事件的元素中獲取脫字符位置，然後使用substring在該位置插入文本。這裏是我的一個項目的片段，我必須處理插入製表符（\t）：

case 9: // Insert tab key at caret location 
    e.preventDefault(); 
    var caret = e.target.selectionStart; 
    e.target.value = e.target.value.substring(0, caret) + '\t' + e.target.value.substring(caret); 
    break;