Question

我在html中有这个表单：

<form id="ConSupAp" name="ConSupAp" action="#" method="post" enctype="multipart/form-data">

Name of the Applicant's Organisation:
<input type="text" id="input_1_1" name="input_1_1" placeholder="Name of the Applicant's Organisation" value="Default value here" required>

Contact Person:
<input type="text" id="input_1_2" name="input_1_2" placeholder="Contact Person" value="Default person here" required>

Telephone (Landline):
<input type="text" id="input_1_3" name="input_1_3" placeholder="Telephone (Landline)" value="0123456789" required>

Telephone (Mobile):
<input type="text" id="input_1_4" name="input_1_4" placeholder="Telephone (Mobile)" value="01782242565" required></td>

Email:
<input type="text" id="input_1_5" name="input_1_5" placeholder="Email" value="demo@example.com" required>

Fax:
<input type="text" id="input_1_6" name="input_1_6" placeholder="Fax" value="" required>

Address:
<textarea id="input_1_7" name="input_1_7" placeholder="Address" required></textarea>

</form>

完整表单总共有24个字段，但这并不重要，所以此时我不会列出更多字段。我在页面的末尾有这个：

<script>
var x = document.getElementById("ConSupAp");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
document.getElementById("input_1_1").style.backgroundColor = "yellow";
document.getElementById("input_1_2").style.backgroundColor = "red";
}

function myBlurFunction() {
document.getElementById("input_1_1").style.backgroundColor = "";
document.getElementById("input_1_2").style.backgroundColor = "";
}
</script>

然而，当任何输入被聚焦时，这似乎使第一和第二输入分别为黄色和红色，并且不在每场情况下操作 - 这显然是我想要的，如果我有不同的或同时/每个领域都采取相同的行动。

那么如何使功能专门针对一个目标输入字段运行，如果焦点从input_1_1更改为input_1_2，则onfocus功能在1_2上工作，而onblur在1_1上工作？

注意 - 在此页面上使用了jQuery。

更新 - 我创建了这个版本，试图突出我想要的东西。我根本不想要改变颜色背景。我尝试使这成为一些onblur AJAX的起点但我在尝试整体问题时遇到了问题，这里就是SO。人们似乎对整体情况有点不了解，我最初的求助请求标记为“太宽泛”＃34;我试图将它（痛苦地）分解成小块。首先，当一个字段处于onblur并且用户移动到下一个字段时，获取一个js触发器。我不希望这个循环按特定顺序排列。我只是想要在onblur事件发生时触发每个特定输入字段，这样我就可以弄清楚如何将它扔到服务器上，并根据服务器端php显示结果吐了一些东西。

Answer 1

只要任何一个子输入元素处于焦点状态，表格就会聚焦 - 这就是当你点击它们时发生的事情。

您是否只想要前两个字段的亮点？将事件侦听器附加到相应的输入元素而不是整个表单以“每场基础”效果。

如果您想要不同的东西，那么您必须相应地更改脚本。

编辑：如果你想要一个行为，输入必须按照字段存在的顺序进行，当你向下移动时，已经完成的输入应该是“红色”而当前的输入应该是“黄色”，然后在这里是一个小提琴：

Serial Form I/O

仔细注意如何在循环中分配事件侦听器以及如何强制用户按顺序输入数据。

var input_elements = document.getElementsByClassName("form_ip");

为所有输入元素添加相同的类名，即"form_ip"，并将它们选为列表。然后使用done数组添加所有事件侦听器，该数组存储用户是否在前一个输入元素中输入了值。

for (var i = 0; i < done.length; ++i) {
    // Closures save the day, to avoid variable hoisting otherwise.
    (function (i) {
        input_elements[i].addEventListener("focus", function () {
            for (var j = 0; j < i; ++j) {
                // If a previous input element is blank, move to that instead
                if (!done[j]) {
                    input_elements[j].focus();
                    return;
                }
                handleBlur(j);
            }
            handleFocus(i);

            // we are done with ith element if it has a value
            done[i] = input_elements[i].value.length > 0;
        }, false);
    }(i));
}

handleBlur和handleFocus函数在脚本中定义。

<强>重新修改在这种情况下，只需为每个输入元素的onblur事件分配一个事件监听器，并将值存储在某处。您还可以检查侦听器中的输入有效性，并让用户知道它。当你想通过AJAX发送它时，只需将数据同化为一个对象，将所述对象转换为JSON并发送它。在服务器端，解析JSON数据并提取值。

Answer 2

首先，JavaScript代码属于标题，而不是页面底部。也不要像var x = document.getElementById("ConSupAp");那样编写像onLoad这样的代码。将其放入window.onload = function() { var x; x = document.getElementById("input_1_1"); x.addEventListener("focus", myBlurFunction1_1, true); x.addEventListener("blur", myBlurFunction1_1, true); x = document.getElementById("input_1_2"); x.addEventListener("focus", myBlurFunction1_2, true); x.addEventListener("blur", myBlurFunction1_2, true); x = document.getElementById("input_1_3"); x.addEventListener("focus", myBlurFunction1_3, true); x.addEventListener("blur", myBlurFunction1_3, true); ... // Don't reference the "ConSupAp" at all. }方法中。（reference）

正如Akash所说，如果您将事件监听器附加到表单，它将在表单上工作。你想要的是将它们附加到文本字段。如果您使用的是jQuery，您可以使用CSS选择器在循环中执行此操作，而不是列出字段，但这是您的选择。

对于测试，只需尝试以下内容：

function myBlurFunction1_1() {
    document.getElementById("input_1_1").style.backgroundColor = "";
}
function myBlurFunction1_2() {
    document.getElementById("input_1_2").style.backgroundColor = "";
}
function myBlurFunction1_3() {
    document.getElementById("input_1_3").style.backgroundColor = "";
}

修改

使用这种回调模块化：

{{1}}

javascript onfocus / onblur特定于输入 - 不工作

2 个答案:

修改