Javascript onfocus事件

Question

我有一个文本框，如果输入的值需要使用一些规则表达式进行验证，我需要在用户输入数据时验证该值。哪个事件适合用于此操作？在textbox上使用onfocus事件一些示例将会很有帮助

Answer 1

使用onKeypress或onKeyup。初学者通常认为onChange会做您想做的事情，但只有当输入失去焦点时才会触发。OnFocus是无关紧要的--也就是框第一次获得焦点的时候，而不是用户输入的时候。

Answer 2

通常，您会在文本输入失去焦点时执行此操作，因此它将使用blur事件。原因是在键入足够数量的字符之前，许多输入都是无效的。当用户仍在输入有效字符串时，提交验证错误可能会让用户非常恼火。例如，在执行电子邮件验证时，输入只有在输入@符号后才有效。请注意，您还需要验证表单提交的时间，以捕捉字段从未获得焦点的情况。

使用jQuery可能如下所示：

 $('.klass').blur( function() {
     if (!$(this).val().match( /your-regular-expression/ )) {
         $(this).next('.validation-message').show();
         return false;  // keep focus on field
     }
     return true;
 });

这里假设有一些HTML，比如

 <input type="text" class="klass" name="myInput" />
 <span class="validation-message" style="display: none;">This is not valid</span>

Answer 3

要阻止用户写入无效字符，或者在用户键入时验证字段，可以使用.onkeypress。

document.getElementById(fieldId).onkeypress = onkeypressHandler;

var onkeypressHandler = function (event) {
    var eKey = event.charCode;
    var str = String.fromCharCode(eKey);
    var pattern = /[^0-9]/g;
    var strTmp = str.replace(pattern, "");
    if (str!== strTmp) {
        return false;
    }
    return true;
}

在本例中，唯一有效的字符是数字，如果按下的键不是数字，则函数将返回false，键将被忽略。

在用户完成输入后，还可以使用.onchange验证字段

document.getElementById(fieldId).onchange= onChangeHandler;