Блог

Главная - Вопросы по программированию - Как я могу управлять поведением ввода для многих элементов ввода с разными атрибутами имен?

Как я могу управлять поведением ввода для многих элементов ввода с разными атрибутами имен?

#javascript #forms #dom

Вопрос:

Мои навыки работы с 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…is для этого существует метод » тип «или просто метод «имя»?

Если нет, я думал, что буду использовать массив входных имен, но мне тоже не очень повезло применить эту идею.

Ищете самый разумный способ подойти к этому и выйти за рамки одного названного ввода в наилучшем возможном СУХОМ подходе. Заранее спасибо.

Ответ №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) {...};
}

Вот учебник о том, как использовать DOM, если вам интересно

Комментарии:

1. Спасибо за это! Работает так, как мне было нужно. Вырвал меня из моего туннельного видения!

Ответ №2:

Вероятно, лучше всего было бы использовать document.querySelectorAll (документы). Это вернет вам список (не массив) всех элементов, соответствующих 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) {...};
    }    
  }
Метки: