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

Question

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

现在，我想在所有字段为 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

这可以使用普通 JavaScript 来实现，如 zvona建议。

这是一个模拟 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;
    }
}