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

How to add onChange function for all HTML form fields

提问人：Bala 提问时间：7/25/2014 最后编辑：Artjom B.Bala 更新时间：11/15/2023 访问量：8842

问：

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

目前，所有 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="">...

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

我如何在我的 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" >
JavaScript HTML AJAX DOM XHTML

评论

0赞 Mr Lister 7/26/2014
1） 属性应该只包含有效的 Javascript，比如 or or something，以及 2） 由于它被标记为 XHTML，因此不要在属性名称中使用大写字母。on..."fnName()""return fnName();"

答：

0赞 user3154108 7/25/2014 #1

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

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

2赞 cracker 7/25/2014 #2

您可以尝试使用以下命令为表单提供更改功能

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

演示1

演示2

1赞 Samuli Hakoniemi 7/25/2014 #3 
[].forEach.call(document.querySelectorAll("input"), function(input) {
  input.addEventListener("change", fnName, false);
  input.addEventListener("blur", fnName, false);
});

评论

0赞 Jackson 7/25/2014 #4

尝试如下操作：

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
    }
}
3赞 Mr. Polywhirl 7/25/2014 #5

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

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

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;
    }
}
0赞 Dan Dascalescu 11/15/2023 #6

如果您的 s 在窗体中，则可以将 onchange 事件处理程序分配给窗体本身。当任何元素发生变化时，在焦点移开它之后，它将触发。<input>

尽管您可能想要一个事件处理程序。例如，要在表单中的任何输入发生更改时启用“保存”按钮，您可以执行以下操作：input

document.querySelector('form').addEventListener('input', event => {
  document.querySelector('form button').removeAttribute('disabled');
  document.querySelector('form button').textContent = 'Save';
});
<form>
  <input type="text">
  <input type="number" min="0">
  <button type="submit" disabled>Input something...</button>
</form>

上一个：如何为所有HTML表单字段添加onChange函数

下一个：HTML 中的欧元符号