关于获取表单中变更输入框名称及点击链接信息的技术咨询

Hey 👋，看起来你想要搞定两个核心需求：一是捕获表单里输入框的内容变更，拿到发生变化的输入框的name属性；二是监听表单内编辑链接的点击动作，获取被点击链接的name和显示文本。我结合你给出的表单结构，整理了完整的可运行实现方案，一起来看看吧：

实现思路与完整代码 #

我们可以通过给输入框绑定input实时变更事件，给链接绑定click点击事件来实现需求，同时要记得阻止链接默认的跳转行为（毕竟你的链接href是#，没必要跳转）。

<form action="myPHP.php" id="myForm" method="POST">
  <input id="dCell" name="dCel" type="text" value=""/>
  <a name="btn-1" href="#">edit</a><br>
  <input name="h1" type="text" value="" />
  <a name="btn-2" href="#">edit</a>
</form>

<script>
// 监听所有输入框的内容变更
const formInputs = document.querySelectorAll('#myForm input[type="text"]');
formInputs.forEach(input => {
  input.addEventListener('input', function() {
    // 打印变更的输入框名称
    console.log('变更的输入框名称：', this.name);
  });
});

// 监听所有编辑链接的点击
const formLinks = document.querySelectorAll('#myForm a');
formLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止链接默认的跳转行为
    e.preventDefault();
    // 打印被点击链接的名称和文本
    console.log('被点击链接的名称：', this.name);
    console.log('被点击链接的文本：', this.textContent);
  });
});
</script>

关键细节说明 #

• 输入框监听用input事件而不是change事件，是因为input能实时响应每一次内容变化（比如键盘输入、右键粘贴），而change要等输入框失去焦点才会触发，体验上差很多。通过this.name就能直接拿到当前触发事件的输入框的名称，非常方便。
• 链接点击事件里必须加e.preventDefault()，不然点击后页面会跳转到顶部（因为href="#"的默认行为），加了之后就能只执行我们的自定义逻辑啦。
• 选择器上用#myForm限定范围，这样只会监听目标表单里的元素，不会误触发页面上其他相同标签的元素，更安全。

如果你想把逻辑整合到你原来写的chkLen()函数里，也可以这样调整：

function chkLen() {
  const targetForm = document.querySelector("#myForm");
  
  // 绑定输入框变更监听
  const inputs = targetForm.querySelectorAll('input[type="text"]');
  inputs.forEach(input => {
    input.addEventListener('input', function() {
      console.log('变更的输入框名称：', this.name);
    });
  });
  
  // 绑定链接点击监听
  const links = targetForm.querySelectorAll('a');
  links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      console.log('被点击链接的名称：', this.name);
      console.log('被点击链接的文本：', this.textContent);
    });
  });
}

// 页面加载完成后初始化所有监听
window.addEventListener('load', chkLen);

这样页面加载好之后就会自动绑定所有需要的事件，直接用就行～

内容来源于stack exchange