虚拟键盘无法向激活textarea输入字符问题排查与修正请求

架构老林

2026-6-24

问题描述

我有一个虚拟键盘和两个textarea输入框（content1和content2），对应的HTML代码如下：

<textarea class="content" type = "text" id="content1" name = "content1" rows = "7" placeholder='abc'></textarea>
<textarea class="content" type = "text" id="content2" name = "content2" rows = "7" placeholder='abc'></textarea>
<div class="keyBoard" id="keyBoard" class="keyBoard" style="display:none">
   <table> 
    <tr>
      <td><button class="button" type="button" onclick="insertLatter('¹')" >¹</button></td>
      <td><button type="button" onclick="insertLatter('²')" >²</button></td>
      <td><button type="button" onclick="insertLatter('³')" >³</button></td>
      <td><button type="button" onclick="insertLatter('⁴')" >⁴</button></td>
      <td><button type="button" onclick="insertLatter('⁵')" >⁵</button></td>
      <td><button type="button" onclick="insertLatter('⁶')" >⁶</button></td>
      <td><button type="button" onclick="insertLatter('⁷')" >⁷</button></td>
      <td><button type="button" onclick="insertLatter('⁸')" >⁸</button></td>
      <td><button type="button" onclick="insertLatter('⁹')" >⁹</button></td>
      <td><button type="button" onclick="insertLatter('⁰')" >⁰</button></td>
      <td><button type="button" onclick="insertLatter('⁺')" >⁺</button></td>
      <td><button type="button" onclick="insertLatter('⁻')" >⁻</button></td>
      <td><button type="button" onclick="insertLatter('⁼')" >⁼</button></td>
      <td><button type="button" onclick="insertLatter('⁽')" >⁽</button></td>
      <td><button type="button" onclick="insertLatter('⁾')" >⁾</button></td>
    </tr>
</table>
</div>

我想通过这个虚拟键盘向两个textarea输入内容，写了如下JavaScript代码：

function insertLetter(character) {
  const activeElement = document.activeElement; 
  if (activeElement && activeElement.tagName === 'TEXTAREA') { 
    activeElement.focus(); 
    const range = document.createRange(); 
    range.selectNode(activeElement); 
    range.collapse(true); 
    const textNode = document.createTextNode(character); 
    range.insertNode(textNode);
  }
}

但实际效果不符合预期，请问代码存在哪些问题？该怎么修改才能实现需求？

问题分析与修复

存在的问题

函数名拼写错误：HTML中按钮onclick调用的是insertLatter，但JS里定义的函数是insertLetter（字母e和a的差异），导致点击按钮时找不到对应函数。
Range使用逻辑错误：当前代码用range.selectNode(activeElement)选中的是整个textarea元素，而非文本框内的文本内容，插入位置完全错误，且这种方式不会更新textarea的value属性，后续获取输入值时会出错。
焦点丢失问题：点击虚拟键盘按钮时，焦点会转移到按钮上，此时document.activeElement变成按钮，无法正确识别之前选中的textarea。

修复方案

步骤1：修正函数名拼写

把HTML中所有按钮的onclick属性里的insertLatter改为insertLetter，与JS函数名保持一致。

步骤2：优化插入逻辑，正确处理光标与输入值

通过记录当前激活的textarea，直接操作输入框的value结合光标位置插入字符，符合正常输入交互逻辑：

// 记录当前激活的textarea
let currentTextarea = null;

// 监听所有textarea的focus事件，更新当前激活的输入框
document.querySelectorAll('.content').forEach(textarea => {
  textarea.addEventListener('focus', () => {
    currentTextarea = textarea;
  });
});

function insertLetter(character) {
  if (!currentTextarea) return;
  
  // 恢复焦点到目标输入框
  currentTextarea.focus();
  
  const startPos = currentTextarea.selectionStart;
  const endPos = currentTextarea.selectionEnd;
  const value = currentTextarea.value;
  
  // 在光标位置插入字符，若有选中内容则替换
  currentTextarea.value = value.substring(0, startPos) + character + value.substring(endPos);
  
  // 将光标移动到插入字符的后方
  currentTextarea.selectionStart = currentTextarea.selectionEnd = startPos + character.length;
}

步骤3：可选：显示虚拟键盘

如果需要默认显示虚拟键盘，可移除HTML中keyBoard元素的style="display:none"，或通过JS控制：

window.addEventListener('load', () => {
  document.getElementById('keyBoard').style.display = 'block';
});

修复后效果

点击任意textarea激活后，点击虚拟键盘按钮，字符会插入到光标位置；若有选中内容，会直接替换选中内容，同时光标自动移动到插入字符后方，完全符合正常输入框的交互逻辑。

内容的提问来源于stack exchange，提问作者Lê Phong Nguyễn