如何控制具有不同名称属性的许多输入元素的输入行为？答案

【问题标题】：How do I control input behavior over many input elements with different name attributes?如何控制具有不同名称属性的许多输入元素的输入行为？
【发布时间】：2021-11-18 10:44:31
【问题描述】：

我的 JavaScript 技能有点不成熟，但我正在努力改进以下方面：

我目前正在使用脚本通过输入名称属性来影响表单中的单个输入元素：

HTML：

<input type="number" class="form-control" 
     id="floatingInputGrid" 
     name="hoursstagingbudget" value="0" >
<label for="floatingInputGrid">Hours Staging Budget</label>

JavaScript：

var nameElement = document.forms.inputform.hoursstagingbudget

  function nameFocus(e) {
    var element = e.target || window.event.srcElement;
    if ( element.value == "0" )
      element.value = "";
  }

  function nameBlur(e) {
    var element = e.target || window.event.srcElement;
    if ( element.value === "" )
      element.value = "0";
  }
  
  if ( nameElement.addEventListener ) {
    nameElement.addEventListener("focus", nameFocus, false);
    nameElement.addEventListener("blur", nameBlur, false);
  } else if ( nameElement.attachEvent ) {
    nameElement.attachEvent("onfocus", nameFocus);
    nameElement.attachEvent("onblur", nameBlur);
  }

我希望所有数字类型输入都以这种方式运行 - 我正在使用 document.form...是否有“类型”方法或只有“名称”方法来使用它？

如果不是，我想我会使用输入名称的数组，但我也没有太多运气应用这个想法。

寻找最聪明的方法来解决这个问题，并以最好的 DRY 方法扩展到命名输入之外。提前致谢。

【问题讨论】：

标签： javascript forms dom

【解决方案1】：

我会使用 DOM（文档对象模型）来获取所有输入并附加事件侦听器（不推荐使用 document.forms 等）：

var inputs = document.getElementById("yourformidhere").getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
   var currentElement = inputs[i];
   if(currentElement.addEventListener) {...};
   else if (currentElement.attachEvent) {...};
}

如果您有兴趣，这里有一个 tutorial 介绍如何使用 DOM

【讨论】：

谢谢！像我需要的那样工作。打破了我的隧道视野！

【解决方案2】：

最好的办法可能是使用document.querySelectorAll (docs)。这将为您返回与您传入的 css 选择器匹配的所有元素的列表（不是数组）。假设您的所有输入都具有 class="form-control"，此代码应该按照您的描述进行。

  const inputElements = document.querySelectorAll(".form-control");
  for(let i = 0; i < inputElements.length; i++){
      if ( nameElement.addEventListener ) {
          inputElements[i].addEventListener("focus", nameFocus, false);
          inputElements[i].addEventListener("blur", nameBlur, false);
      } else if ( nameElement.attachEvent ) {
          inputElements[i].attachEvent("onfocus", nameFocus);
          inputElements[i].attachEvent("onblur", nameBlur);
      }
   }

【讨论】：

【解决方案3】：

FWIW，在我的情况下，我只需要“数字”类型的输入，这是最终可行的解决方案（稍微扩展 PhoenixXKN 的答案）：

var inputs=document.getElementById("inputform").getElementsByTagName("input");

  for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'number') {
      var currentElement = inputs[i];
      if(currentElement.addEventListener) {...}
      else if (currentElement.attachEvent) {...};
    }    
  }

【讨论】：