forms - Javascript 焦点事件转到下一个表单字段

Question

我对 Javascript 相当陌生，并且有一个基本问题。我有一个带有 first_name 和 last_name 输入字段的 HTML 表单。我在标题中有以下 Javascript 代码，但在代码运行后，焦点转到下一个字段（last_name）。为什么会这样，我该如何纠正？

谢谢你。

<script>
        function validateForm()
        {
            valid = true;

            //validate first name
            if (document.contactform.first_name.value == "")
            {
                //alert user first name is blank
                alert("You must enter a first name");
                document.getElementById("first_name").focus();
                return false;
            }
            return valid;
        }
    </script>   

表单域代码为： input type="text" name="first_name" id="first_name" maxlength="50" size="30" onBlur="validateForm()"

Answer 1

解决此问题的方法是增加一点延迟.. 像这样：

setTimeout(function() {
    document.getElementById('first_name').focus()
}, 10);

这是您在 jsfiddle 中进行此修复的示例：http: //jsfiddle.net/FgHrg/1/

这似乎是一个常见的 Firefox 问题。我不知道确切原因，但它与 Firefox 在 DOM 完全加载之前加载 javascript 有关。换句话说 getElementById('first_name') 返回 null。但是添加轻微的延迟可以解决这个问题。