两个事件按下回车键时触发

时间:2012-10-08 14:40:47

标签: javascript html

在我的代码中,我在标题部分中有以下javascript代码块

    function validateForm(bid) {
        switch (bid) {
        case "submitIDSearch":
            alert("submitIDSearch");
            return false;
        case "submitNameSearch":
            alert("submitNameSearch");
            return false;
        }
    }
    function fKeyDown(e) {
        var  kc = window.event ? window.event.keyCode : e.which;
        if (kc == 13) {
            document.getElementById('submitNameSearch').click();
        }
    }

然后我有以下HTML代码块

    <form name="checkAbsenceForm" method="post" action="absenceReport.htm" onsubmit="return validateForm(this.submited)">
        <label class="q">ID * <input id="searchRUID" name="searchID" maxlength="9" /></label>
        <input id="submitIDSearch" type="submit" value="Search ID" onclick="this.form.submited = this.id;" />
        <hr />
        <label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23" onKeyDown="javascript:fKeyDown(event);"/></label>
        <br />
        <label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23" onKeyDown="javascript:fKeyDown(event);" /></label>
        <input id="submitNameSearch" type="submit" value="Search Name" onclick="this.form.submited = this.id;" />
    </form>

当我在searchLastName输入文本框中按 Enter 键时,会弹出两个警告消息框。一个显示submitNameSearch,另一个显示submitIDSearchsubmitNameSearch是期​​望的事件,但submitIDSearch不是,我认为它默认以某种方式触发。

我可以问一下,当我在searchLastName输入文本框中按 Enter 键时,是否有办法摆脱submitIDSearch事件?

非常感谢!

1 个答案:

答案 0 :(得分:3)

当您在表单中按 Enter 时,表单将被提交。这就是第二次调用validateForm的原因。

两种解决方案:

1)删除onKeyDown="javascript:fKeyDown(event);"以使onsubmit=...上定义的正常验证适用。

2)fKeyDown中,添加e.preventDefault();以防止关键事件的默认处理:

function fKeyDown(e) {
    var  kc = window.event ? window.event.keyCode : e.which;
    if (kc == 13) {
        document.getElementById('submitNameSearch').click();
        e.preventDefault();
    }
}

但如果你真的在fKeyDown中做到这一点,解决方案1就足够了。