如何阻止按钮点击时焦点跳转到其他表单字段？

我明白你的问题啦——点击输入框里的按钮后，不仅弹出模态框，还会意外把焦点跳到表单顶部的输入框，这确实挺烦的。咱们可以通过阻止按钮点击的默认行为，再配合模态框的焦点管理来解决这个问题，具体方案如下：

1. 先阻止按钮的默认焦点跳转行为 #

按钮在输入框区域内点击时，浏览器可能会触发默认的焦点关联逻辑（比如把焦点切到输入框甚至表单顶部元素）。给按钮添加点击事件监听，调用event.preventDefault()就能切断这个默认行为：

// 获取你的按钮元素
const modalTriggerBtn = document.querySelector('#yourButtonId');
modalTriggerBtn.addEventListener('click', function(e) {
  // 阻止浏览器默认的焦点跳转/表单相关行为
  e.preventDefault();
  // 这里执行弹出模态框的代码，比如：
  // document.getElementById('yourModal').classList.add('show');
});

2. 确保按钮类型正确，避免触发表单提交 #

如果你的按钮没设置type属性，浏览器会默认把它当成type="submit"，点击时会触发表单提交，这也是导致焦点跳回顶部的常见原因。一定要给按钮加上type="button"：

<!-- 错误示例：默认是submit类型 -->
<button>打开模态框</button>

<!-- 正确示例：明确设置为button类型 -->
<button type="button" id="yourButtonId">打开模态框</button>

3. 模态框弹出后锁定焦点（可选但推荐） #

为了符合可访问性最佳实践，模态框弹出后最好把焦点锁定在模态框内，这样既避免焦点乱跑，也方便键盘用户操作。可以把焦点设置到模态框内的第一个可交互元素（比如关闭按钮）：

// 模态框显示后执行
const modal = document.getElementById('yourModal');
modal.classList.add('show');
// 将焦点设置到模态框的关闭按钮
modal.querySelector('.close-modal-btn').focus();

结合你的表单代码的完整示例 #

基于你提供的表单片段，修改后的完整代码大概是这样：

<form name="frmSaveuser" id="frmSaveuser" class="frm-agencySubmit" data-frm="SaveUser" autocomplete="off">
  <!-- 表单顶部的输入字段 -->
  <div class="form-group required">
    <label class="control-label" for="activestaff">...</label>
    <input type="text" id="activestaff" name="activestaff">
  </div>

  <!-- 带可点击按钮的输入字段 -->
  <div class="form-group">
    <label class="control-label" for="targetInput">...</label>
    <div class="input-group">
      <input type="text" id="targetInput" name="targetInput">
      <!-- 这里设置正确的按钮类型并绑定事件 -->
      <button type="button" id="openModalBtn" class="btn btn-primary">打开模态框</button>
    </div>
  </div>

  <!-- 模态框 -->
  <div id="userModal" class="modal" style="display: none;">
    <div class="modal-content">
      <button type="button" class="close-modal-btn">&times;</button>
      <h3>模态框标题</h3>
      <p>这里是模态框内容...</p>
    </div>
  </div>
</form>

<script>
// 按钮点击事件处理
document.getElementById('openModalBtn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认焦点跳转
  const modal = document.getElementById('userModal');
  modal.style.display = 'block';
  // 焦点锁定到模态框关闭按钮
  modal.querySelector('.close-modal-btn').focus();
});

// 关闭模态框的处理
document.querySelector('.close-modal-btn').addEventListener('click', function() {
  const modal = document.getElementById('userModal');
  modal.style.display = 'none';
  // 可选：关闭后把焦点放回触发按钮
  document.getElementById('openModalBtn').focus();
});
</script>

这样操作后，点击按钮就只会弹出模态框，再也不会跳焦点到表单顶部啦~

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