如何为所有 HTML 表单字段添加 onChange 函数答案

【问题标题】：How to add onChange function for all HTML form fields如何为所有 HTML 表单字段添加 onChange 函数
【发布时间】：2014-07-25 19:08:48
【问题描述】：

我的 HTML 页面有 10 个文本字段。

目前所有十个字段都没有可用的 onChange EVENT。

<input type="text" name="text1" value="1">
<input type="text" name="text2" value="2">
<input type="text" name="text3" value="3">
<input type="text" name="text4" value="">
<input type="text" name="text5" value="">
<input type="text" name="text6" value="">...

现在，我想在所有字段为input 类型的字段中添加onChange函数。

如何在我的 JS 部分添加 onChange 或 onBlur？

在 onChange 函数中，我将调用 ajax 函数来验证字段是否有 Hacking 关键字。

所以我的问题是：

如何为所有表单域添加 onChange 函数。我的字段应该动态如下：

<input type="text" name="text1" value="1" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text2" value="2" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text3" value="3" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text4" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text5" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text6" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
<input type="text" name="text7" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >

【问题讨论】：

1) on... 属性应该只包含有效的 Javascript，因此 "fnName()" 或 "return fnName();" 或其他内容，以及 2) 由于这是标记为 XHTML，请避免在属性名称中使用大写字母。

标签： javascript html ajax dom xhtml

【解决方案1】：

正如zvona 建议的那样，这可以通过原生 JavaScript 来实现。

这是一个模拟 HTML5 占位符的简单循环。 DEMO>>

var prompt = 'Type something here';

var textFields = document.querySelectorAll('input[name^="text"]');
var index = 0;

for (index = 0; index < textFields.length; ++index) {
    var textField = textFields[index];
    textField.addEventListener('change', onChangeHandler);
    textField.addEventListener('focus', onFocusHandler);
    textField.addEventListener('blur', onBlurHandler);
    textField.value = prompt;
    console.log(textField);
}

function onChangeHandler() {
    // Do something...
}

function onFocusHandler() {
    if (this.value === prompt) {
        this.value = '';
    }
}

function onBlurHandler() {
    if (this.value === '') {
        this.value = prompt;
    }
}

【讨论】：

【解决方案2】：

您可以尝试为您的表单提供更改功能

$('.form :input').change(function(e){
   $('#log').prepend('<p>Form changed ' + $(e.target).attr('id') + '</p>')
});

Demo1

Demo2

【讨论】：

【解决方案3】：

[].forEach.call(document.querySelectorAll("input"), function(input) {
  input.addEventListener("change", fnName, false);
  input.addEventListener("blur", fnName, false);
});

【讨论】：

toddmotto.com/ditch-the-array-foreach-call-nodelist-hack

【解决方案4】：

getElementsByTagname() 为您获取所有输入的数组。对它们进行交互并添加EventListener。

或者使用jQuery的$('input').on('change'...)

【讨论】：

【解决方案5】：

尝试类似：

var inputList = document.getElementsByTagName("input");
for(var i=0;i<inputList.length;i++){
    inputList[i].onchange = function(){
        //function here
    }
    inputList[i].onblur = function(){
        //function here
    }
}

【讨论】：