马黑黑老师 textarea符号补全演示

醉美水芙蓉

<style> .wrap { margin: 30px auto; width: 800px; height: 460px; } #editor { width: 100%; height: 100%; box-sizing: border-box; padding: 10px; font-size: 1.5em; } </style> <div class="wrap"> <textarea id="editor" placeholder="输入小角括号引号等..."></textarea> </div> <script> // 自动补全成对符号函数 function autoCompletePair(textarea, leftChar, rightChar) { const start = textarea.selectionStart; const end = textarea.selectionEnd; const oldValue = textarea.value; const selectedText = oldValue.substring(start, end); let newText, cursorPos; // 若有选中文本：包裹选中的内容 if (selectedText.length > 0) { newText = leftChar + selectedText + rightChar; cursorPos = start + leftChar.length + selectedText.length + rightChar.length; textarea.value = oldValue.slice(0, start) + newText + oldValue.slice(end); textarea.setSelectionRange(cursorPos, cursorPos); // 若无选中文本：插入成对符号，光标置于中间 } else { newText = leftChar + rightChar; textarea.value = oldValue.slice(0, start) + newText + oldValue.slice(end); textarea.setSelectionRange(start + 1, start + 1); } } // 自动补全的成对符号设置（可以增补，但仅限于键盘符号） const pairs = { '(': ')', '[': ']', '{': '}', '<': '>', "'": "'", '"': '"', '`': '`', }; // 编辑器 ：按键按下 editor.onkeydown = (e) => { if (pairs[e.key]) { e.preventDefault(); // 阻止默认输入 autoCompletePair(editor, e.key, pairs[e.key]); // 调用自动补全函数 return; } }; </script>

醉美水芙蓉

核心：event.key

textarea 文本框控件可以处理键盘按下、弹起、输入等事件，并通过 event.key 识别键位名称。键盘输入时（本例监听键位按下事件），当监听到符合 pairs 对象的键名时，自动补上其键值，就达成了符号补全的功能。自动补全函数还针对是否有文本被选中，两种情形插入自动补全符号时处理行为不同。