如何为所有HTML表单字段添加onChange函数 [英] How to add onChange function for all HTML form fields

问题描述

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

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

 < input type =textname =text1value =1> 
< input type =textname =text2value =2> 
< input type =textname =text3value =3> 
< input type =textname =text4value => 
< input type =textname =text5value => 
< input type =textname =text6value => ... 
  

现在，我想在字段为 input type的所有字段中添加onChange Function。

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

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

所以我的问题是：

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

 < input type =textname =text1value =1 onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text2value =2onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text3value =3onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text4value =onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text5value =onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text6value =onChange =javascript：fnNameonBlur =javascript：fnName> 
< input type =textname =text7value =onChange =javascript：fnNameonBlur =javascript：fnName> 
  

解决方案

使用vanilla JavaScript可以实现 zvona 建议。

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

  var prompt ='在此输入内容'; 
 
 var textFields = document.querySelectorAll（'input [name ^ =text]'）; 
 var index = 0; （index = 0; index< textFields.length; ++ index）{
 var textField = textFields [index]; 
 
。 
 textField.addEventListener（'change'，onChangeHandler）; 
 textField.addEventListener（'focus'，onFocusHandler）; 
 textField.addEventListener（'blur'，onBlurHandler）; 
 textField.value =提示; 
 console.log（textField）; 
 
 
函数onChangeHandler（）{
 //做某事... 
} 
 
函数onFocusHandler（）{
 if（this.value === prompt）{
 this.value =''; 
 
 
 
函数onBlurHandler（）{
 if（this.value ===''）{
 this.value = prompt; 
} 
} 
  

My HTML Page has 10 Text Fields.

Currently no onChange EVENT is available for all ten fields.

<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="">...

Now, I want to add onChange Function in all fields whose field is of input type.

How do I add onChange or onBlur even in my JS section?

In onChange function, I will call ajax function which will validate whether the field has Hacking Keywords.

So my question is:

How do I add onChange function for all form fields. My field should dynamically be like below:

<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" >

解决方案

This can be achieved with vanilla JavaScript as zvona suggests.

Here is a simple loop to mock an HTML5 placeholder. <<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;
    }
}

这篇关于如何为所有HTML表单字段添加onChange函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！