我的 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 方法中擴展到一個命名的輸入之外。提前致謝。
uj5u.com熱心網友回復：
我會使用 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的教程
uj5u.com熱心網友回復：
最好的辦法可能是使用document.querySelectorAll（docs）。這將回傳與您傳入的 css 選擇器匹配的所有元素的串列（而不是陣列）。假設您的所有輸入都具有此代碼應該執行您所描述的操作。
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);
}
}
uj5u.com熱心網友回復：
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) {...};
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318160.html
標籤：javascript 形式 dom
上一篇：如何在特定類中定位id？