Mis habilidades de JavaScript son un poco verdes, pero estoy tratando de mejorar lo siguiente:
Actualmente estoy usando una secuencia de comandos para efectuar un solo elemento de entrada en un formulario por el atributo de nombre de entrada:
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); }Quiero que todas las entradas de tipo de número se comporten de esta manera: estoy usando document.form... ¿hay un método de 'tipo' o solo el método de 'nombre' para usar esto?
Si no, estaba pensando en usar una matriz de nombres de entrada, pero tampoco estoy teniendo mucha suerte aplicando esa idea.
Buscando la forma más inteligente de abordar esto y expandirse más allá de la entrada nombrada en el mejor enfoque SECO posible. Gracias por adelantado.
FWIW, en mi caso, necesitaba esto solo para entradas de tipo "número" y esta es la solución final que funcionó (extendiendo un poco la respuesta de 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) {...}; } }Usaría DOM (Document Object Model) para obtener todas las entradas y adjuntar el detector de eventos (no se recomienda usar document.forms etc.):
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) {...}; }Aquí hay un tutorial sobre cómo usar DOM si está interesado
Probablemente, lo mejor sería usar document.querySelectorAll ( docs ). Esto le devolverá una lista (no una matriz) de todos los elementos que coinciden con el selector css que pasa. Suponiendo que todas sus entradas tengan la class="form-control" este código debería hacer lo que describió.
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); } }