我正在嘗試使用 HTML 制作一個代碼編輯器：<!DOCTYPE html><html><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=Edge'> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' href='style.css'></head><body> <pre id='editor'><code contenteditable='true'></code></pre> <script type='module'> import { highlight } from './highlighter.js'; import { Caret } from './caret.js'; (() => { const editor = document.querySelector('#editor code'); const caret = new Caret(editor); highlight(editor); editor.addEventListener('input', e => { highlight(editor); e.preventDefault(); }); editor.addEventListener('keydown', e => { const TAB = 9; const ENTER = 13; switch (e.keyCode) { // ... } }); })(); </script></body></html>熒光筆.js：import { Caret } from './caret.js';export function highlight(editor){ // ... const NORM = '#E6E6FA'; // ... const Highlighter = { source: editor.innerText, start: 0, curr: 0, // ... fin() { return this.curr >= this.source.length; }, advance() { return this.source[this.curr++]; }, // ... scan() { let result = ''; this.start = this.curr; if (this.fin()) { return null; }基本上，它獲取用戶代碼的文本內容，掃描它以生成帶有顏色數據的詞素，將這些詞素拆分為字符，并將其放入帶有顏色的 <span> 標簽中，然后將這些 <span> 附加到字符串中編輯器的innerHTML更新為，最后用戶的光標放回到正確的位置；這是根據輸入完成的。但有一個問題：如果用戶輸入速度太快，他們輸入的文本可能會加倍。我嘗試使用其他類型的事件偵聽器來解決此問題，并嘗試簡單地使用 setInterval，但效果并不好。
語法熒光筆無法更新文本
臨摹微笑
2023-08-24 10:26:59
