马黑黑 发表于 2026-5-20 07:29

textarea符号补全演示

<div class="codebox" data-prev="1">
&lt;style&gt;
    .wrap { margin: 30px auto; width: 800px; height: 460px; }
    #editor { width: 100%; height: 100%; box-sizing: border-box; padding: 10px; font-size: 1.5em; }
&lt;/style&gt;

&lt;div class="wrap"&gt;
    &lt;textarea id="editor" placeholder="输入小角括号引号等..."&gt;&lt;/textarea&gt;
&lt;/div&gt;

&lt;script&gt;
    // 自动补全成对符号函数
    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 &gt; 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 = {
      '(': ')',
      '[': ']',
      '{': '}',
      '&lt;': '&gt;',
      "'": "'",
      '"': '"',
      '`': '`',
    };

    // 编辑器 ：按键按下
    editor.onkeydown = (e) =&gt; {
      if (pairs) {
            e.preventDefault(); // 阻止默认输入
            autoCompletePair(editor, e.key, pairs); // 调用自动补全函数
            return;
      }
    };
&lt;/script&gt;
</div>

<script>
   function loadLineNumFile() {
       const script = document.createElement('script');
       script.charset = 'utf-8';
       script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
       script.defer = true;
       script.onload = () => addLineNumber();
       document.head.appendChild(script);
   }

   loadLineNumFile();
</script>

马黑黑 发表于 2026-5-20 07:37

核心：event.key

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

杨帆 发表于 2026-5-20 12:18

马黑黑 发表于 2026-5-20 07:37
核心：event.key

textarea 文本框控件可以处理键盘按下、弹起、输入等事件，并通过 event.key 识别键位 ...

厉害~很实用的功能，能集成到帖子编辑器中就更强大了（http://mhh.52qingyin.cn/api/pccc/）

霜染枫丹 发表于 2026-5-20 17:37

意思通过解释知道了，只是我好不容易都变成那个单个了。之前我不知道怎样从补全的符号中出去，就一直没用过。纯山寨。{:4_173:}

感谢分享，下午好！{:4_204:}{:4_190:}

红影 发表于 2026-5-20 19:19

这个可以自动补全成对符号呢，以前以为这些符号是自动成对的呢{:4_173:}

马黑黑 发表于 2026-5-20 21:54

红影 发表于 2026-5-20 19:19
这个可以自动补全成对符号呢，以前以为这些符号是自动成对的呢
现代输入法可以设置符号自动成对输出。编辑器软件绝大多数也支持符号的成对输出。Web页嵌入的编辑器如果实现类似功能，需要通过JS编程实现。

马黑黑 发表于 2026-5-20 21:56

霜染枫丹 发表于 2026-5-20 17:37
意思通过解释知道了，只是我好不容易都变成那个单个了。之前我不知道怎样从补全的符号中出去，就一直没用过 ...

这个是基于 HTML 的 textarea 标签的，和输入法的成对符号输出设置层面不同。

马黑黑 发表于 2026-5-20 21:57

杨帆 发表于 2026-5-20 12:18
厉害~很实用的功能，能集成到帖子编辑器中就更强大了（http://mhh.52qingyin.cn/api/pccc/）

工作环境不一样：本例基于 textarea 标签，那个编辑器基于可编辑的 div，操作方式不同，功能移植需要另外编程。

杨帆 发表于 2026-5-21 11:06

马黑黑 发表于 2026-5-20 21:57
工作环境不一样：本例基于 textarea 标签，那个编辑器基于可编辑的 div，操作方式不同，功能移植需要另外 ...

明白了，谢谢老师{:4_190:}

马黑黑 发表于 2026-5-21 13:03

杨帆 发表于 2026-5-21 11:06
明白了，谢谢老师

不过一直也并不复杂，核心在于掌握可编辑 div 类元素的几个API，例如 selection、range 等

杨帆 发表于 2026-5-21 21:12

马黑黑 发表于 2026-5-21 13:03
不过一直也并不复杂，核心在于掌握可编辑 div 类元素的几个API，例如 selection、range 等

谢谢老师，感觉还是挺复杂呢
页: [1]
查看完整版本: textarea符号补全演示