如何为所有HTML表单字段添加onChange功能

How to add onChange function for all HTML form fields

本文关键字：字段 添加 onChange 功能 表单 HTML      更新时间：2023-09-26

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

目前没有onChange EVENT可用于所有10个字段。

<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 Function。

我如何添加onChange或onBlur甚至在我的JS部分?

在onChange函数中，我将调用ajax函数，该函数将验证字段是否具有黑客关键字。

我的问题是:

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

这可以按照zvona的建议使用普通JavaScript实现。

下面是一个简单的循环来模拟HTML5占位符。演示& lt; & lt; >> 
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;
    }
}

您可以尝试使用

给更改功能到您的表单
$('.form :input').change(function(e){
   $('#log').prepend('<p>Form changed ' + $(e.target).attr('id') + '</p>')
});

Demo1

以及接下来

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

getElementsByTagname()为您提供所有输入的数组。通过它们和addEventListener进行交互。

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

试试这样写:

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
    }
}
相关文章：