Question

我有一个包含多个字段的数据库搜索表单。其中两个，job_id和job_desc，我希望在使用另一个时禁用，反之亦然。我写了一个小Javascript函数来做这件事。

这是我的表单代码：

<input type="text" id="job_id" oninput="input('job_id','job_desc')" onblur="blur('job_id','job_desc')">
<textarea id="job_desc" oninput="input('job_desc','job_id')" onblur="blur('job_desc','job_id')"></textarea>

这是我的Javascript代码：

function input(a,b)
    {
    var a = document.getElementById(a);
    var b = document.getElementById(b);
    alert("This will disable "+b); // Let the user know we are disabling the other field
    b.value = ""; // Empty the other field
    b.disabled = true; // Disable the other field
    }

function blur(a,b)
    {
    var a = document.getElementById(a);
    var b = document.getElementById(b);
    if(a.value = "") // If the field is empty...
        {
        b.disabled = false; // Enable the other field.
        }
    }

我有这些问题：

1）由于某种原因，一旦第一个字段为空并且模糊，我的第二个字段就不会重新启用。这让我相信onblur()事件无效。

2）一旦我输入了一些文字，我就会收到一次警报，这一切都很好。但是，当我清空字段并重新输入一些文本时，警报不会再次触发。如何重置oninput()事件？

这是我的小提琴：fiddle

Answer 1

您可以使用＆＃34; onkeyup ＆＃34;事件而不是其他事件：

HTML代码为：

<input id="job_id" onkeyup="input('job_id','job_desc')">
<br>
<textarea id="job_desc" onkeyup="input('job_desc','job_id')"></textarea>

和JS功能：

function input(a, b) {
        var ea = document.getElementById(a); // We put A in a variable
        var eb = document.getElementById(b); // We put B in a variable
        if(ea.value != ""){ // If the element have a value / text in it
            if(!eb.disabled) // we check if the other element is disabled, if not, we trigger the alert
                alert("This will disable " + b); // Let the user know we are disabling the other field

            eb.value = ""; // Empty the other field
            eb.disabled = true; // Disable the other field   
        }else{ // if the element's value is empty (which means that we have erased the existing value)
            alert(b + " is now enabled"); // Let the user know we are enabling the other field
            eb.disabled = false; // We re-enable the field
        }
    }

它可以在所有浏览器上正常工作.. 我希望它能帮到你！

Answer 2

除了提供的解决方案之外，您的代码无法正常工作的原因是它与native blur() function on the window object存在冲突，因此您的blur调用正在调用而不是您自己的blur函数。您需要更改其名称。

修复后的另一个问题是

if(a.value = "") // If the field is empty...

它应该有两个=标志进行比较。

if(a.value == "") // If the field is empty...

http://jsfiddle.net/q11m3ahz/6/

演示

如何在首次使用后重置oninput（）html事件？

2 个答案: