Question

我的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 Keywords。

所以我的问题是：

如何为所有表单字段添加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" >

Answer 1

这可以通过zvona建议的vanilla JavaScript来实现。

这是一个模拟HTML5占位符的简单循环。＆LT;＆LT; DEMO＆GT;＆GT;

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;
    }
}

Answer 2

您可以尝试使用

为表单提供更改功能

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

Demo1

Demo2

Answer 3

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

Answer 4

getElementsByTagname()为您提供所有输入的数组。迭代它们和addEventListener。

或者使用jQuery＆＃39; $('input').on('change'...)

Answer 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
    }
}

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

5 个答案: