我怎么知道在輸入框中更改了文本的哪一部分？

Question

我有一個輸入框，希望我可以檢測到用戶修改的詳細信息。

如：

• 用戶在框為空的情況下鍵入“ A”：

  deletedTextCount = 0, deletePosition = -1, insertPosition = 0, insertedText = 'A'

• 當“ ABCD”在框中時，用戶將插入號放在“ C”之后並按退格鍵：

  deletedTextCount = 1, deletePosition = 2, insertPosition = -1, insertedText = ''

• 當“ ABCD”位於框中時，用戶選擇“ BC”並粘貼“ FOO”：

  deletedTextCount = 2, deletePosition = 1, insertPosition = 1, insertedText = 'FOO'

輸入事件是否可以提供這些屬性，或者我必須以某種方式計算這些屬性？

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; console.log(`before: ${before}, after: ${after}`); let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

Answer 1

編輯好的，所以當從輸入的中間開始工作時這是行不通的，但是我建議使用像jsdiff這樣的字符串區分庫來獲得非常詳細的更改列表。

---

此功能將找出更改，添加或刪除的內容。

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; // Length of change, negative if removed const lengthChange = after.length - before.length; let changed; // If added some, get the new stuff if (lengthChange > 0) { changed = after.slice(after.length - lengthChange); // Other wise get the old stuff } else { changed = "-" + before.slice(before.length + lengthChange); } console.log(`before: ${before}, change: ${changed}, after: ${after}`); before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

Answer 2

經過一番掙扎，我認為我已經解決了...

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { selectionStart: start, value: after } = target.currentTarget; // calculate the different starting points from both direction let p1 = 0, p2 = 0; // calclate the end point first for(; p2 < after.length - start; p2++){ if(before[before.length - 1 - p2] === undefined || before[before.length - 1 - p2] !== after[after.length - 1 - p2]){ break; } } // calclate start point for(; p1 < after.length - p2 - (after.length > before.length ? 1 : 0); p1++){ if(before[p1] !== after[p1] || p1 + p2 >= before.length){ break; } } let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; // has delete if(p1 + p2 < before.length){ deletedTextCount = before.length - (p1 + p2); deletePosition = p1; } // has add if(p1 + p2 < after.length){ insertedText = after.substr(p1, after.length - (p1 + p2)); insertPosition = p1; } console.log(`deletePosition: ${deletePosition}, deletedTextCount: ${deletedTextCount}, insertPosition: ${insertPosition}, insertedText: "${insertedText}"`); before = after; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" />