ASP.NET Web Forms：点击屏幕按钮向当前激活输入框模拟按键且不改变焦点

核心思路 #

通过纯前端技术实现：

• 跟踪当前获得焦点的输入框
• 点击屏幕按钮时在光标位置插入对应字母，保持输入框焦点
• 完全避免页面回发或重载

实现代码 #

1. HTML结构（可嵌入ASP.NET Web Forms页面）

<!-- 屏幕字母按键组 -->
<div class="letter-keys">
  <button type="button" data-char="F">F</button>
  <button type="button" data-char="Q">Q</button>
  <button type="button" data-char="K">K</button>
</div>

<!-- 示例输入框（对应ASP.NET Web Forms中的asp:TextBox生成的input） -->
<input type="text" class="form-input" placeholder="输入框1">
<input type="text" class="form-input" placeholder="输入框2">
<input type="text" class="form-input" placeholder="输入框3">

2. CSS样式（优化按键显示）

.letter-keys {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}

.letter-keys button {
  padding: 8px 16px;
  font-size: 18px;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.letter-keys button:active {
  background-color: #bdbdbd;
  transform: scale(0.98);
}

.form-input {
  margin: 5px 0;
  padding: 6px;
  width: 200px;
}

3. JavaScript逻辑（核心功能实现）

// 存储当前获得焦点的输入框
let activeInput = null;

// 监听所有输入框的焦点事件，记录当前激活的输入框
document.querySelectorAll('.form-input').forEach(input => {
  input.addEventListener('focus', () => {
    activeInput = input;
  });
  
  // 输入框失去焦点时清除记录（避免无效引用）
  input.addEventListener('blur', () => {
    if (activeInput === input) {
      activeInput = null;
    }
  });
});

// 给所有字母按键绑定点击事件
document.querySelectorAll('.letter-keys button').forEach(button => {
  button.addEventListener('click', () => {
    if (!activeInput) return; // 无激活输入框时不执行
    
    const char = button.getAttribute('data-char');
    const startPos = activeInput.selectionStart;
    const endPos = activeInput.selectionEnd;
    const currentValue = activeInput.value;
    
    // 在光标位置插入字符
    activeInput.value = currentValue.substring(0, startPos) + char + currentValue.substring(endPos);
    
    // 恢复光标位置到插入字符的右侧
    activeInput.selectionStart = activeInput.selectionEnd = startPos + 1;
    
    // 确保输入框保持焦点（适配部分设备）
    activeInput.focus();
  });
});

ASP.NET Web Forms适配注意事项 #

• 避免回发：必须使用纯HTML <button type="button">，不要使用<asp:Button>（会触发服务器回发）。如果要使用服务器控件，需设置OnClientClick="return false;"并移除OnClick服务器事件。
• input选择器：如果页面中的输入框是<asp:TextBox>生成的，需给TextBox添加CssClass="form-input"，确保JS选择器能匹配到目标元素。
• 无框架依赖：所有代码基于标准HTML/CSS/JavaScript，无需引入任何第三方框架，兼容ASP.NET Web Forms的页面生命周期。

内容的提问来源于stack exchange，提问作者MikeFUT