首页 » JavaScript » 共有的表单事件

共有的表单事件

除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件。

  • blur:当前字段失去焦点时触发。
  • change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素在其选项发生改变时触发。
  • focus:当前字段获得焦点时触发

当用于改变了当前字段的焦点,或者我们调用了blur()或focus()方法时,都可以触发blur和focus事件。这两个事件在所有表单字段中都是相同的。但是,change事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素,当它们从获得焦点到失去焦点且value值改变时,才会触发change事件。对于<select>元素,只要用户选择了不同的选项,就会触发change事件;换句话说,不失去焦点也会触发change事件。

通常,可以使用focus和blur事件来以某种方式改变用户界面,那么向用于该处视觉提示,要么是向界面中添加额外功能(例如,为文本框显示一个下拉选项菜单)。而change事件则经常用与验证用户在字段中输入的数据。例如,假设有一个文本框,我们只允许用户输入数值。此时,可以利用focus事件来修改文本框的背景颜色,以便更清楚地表明这个字段获得了焦点。可以利用blur事件恢复文本框的背景颜色,利用change事件在用户输入了非数值字符时再次修改背景颜色。下面给出了实现上述功能的代码:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }    
};
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (target.style.background != "red") {
        target.style.background = "yellow";
    }
});
EventUtil.addHandler(textbox, "blur", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});
EventUtil.addHandler(textbox, "change", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});

在次,onfocus事件处理程序将文本框的背景色修改为黄色,以清楚地表现当前字段已经激活。随后,onblur和onchange事件处理程序则会在发现非数值字符时,将文本框背景修改为红色。为了测试用户输入的是不是非数值,这里针对文本框的value属性使用了简单的正则表达式。而且,为了确保无论文本框的值如何变化,验证规则始终如意,onblur和onchange事件处理程序中使用了相同的正则表达式。

关于blur和change事件的关系,并没有严格的规定。在某些浏览器中,blur事件会先于change事件发生;而在其它浏览器中,则恰好相反。为此,不能假定这两个事件总会以某种数序依次触发,这一点要特别注意。

此文章发表在 JavaScript 标签为 . 将固定链接加入收藏.