JavaScript学习笔记（十三）---- 表单事件

1.表单字段
可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements集合中的顺序与他们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。

    <form >
        <ul>
            <li><input type="radio" name="color" value="red">Red</li>
            <li><input type="radio" name="color" value="green">Green</li>
            <li><input type="radio" name="color" value="blue">Blue</li>
        </ul>    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    var colorFields = form.elements["color"];
    alert(colorFields.length); //3    
    var firstColorField = colorFields[0];
    var firstFormField = form.elements[0];
    alert(firstColorField==firstFormField); //true 
    </script>

1.共有表单字段属性

表单字段共有的属性和方法如下：

　　disabled：布尔值，表示当前字段是否被禁用。

　　form：指向当前字段所属表单的指针；只读。

　　name：当前字段的名字。

　　readOnly：布尔值，表示当前字段是否只读。

　　tabIndex：表示当前字段的切换(tab)序号。

　　type：当前字段的类型，如“checkbox”、“radio”，等等。

　　value：当前字段将被提交给服务器的值。

    var form = document.getElementById("myForm");
    var field = form.elements[0];
    field.value = "Another value";
    //alert(field.form == form);
    field.focus(); //把焦点设置到当前字段
    field.disabled = true; //禁用当前字段

避免多次提交表单

    var form = document.getElementById("myForm");
    EventUtil.addHandler(form,"submit",function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);        
        var btn = target.elements["btn"];//取得提交按钮        
        btn.disabled = true;//禁用它        
    });

注意：不能通过onclick事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的submit事件之前触发click事件，而有的浏览器则相反。对于先触发click事件的浏览器，意味着会在提交发生之前禁止按钮，结果永远都不会提交表单。因此，做好是通过submit事件来禁用提交按钮。

2.共有的表单字段方法：focus() 和 blur()

focus() 方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。

blur( ) 方法的作用是从元素中移走焦点，在调用blur( )方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走而已。

3.共有的表单字段事件

所有表单字段都支持下列3个事件：

　　blur ：当前字段失去焦点时触发。

　　change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发。

　　focus：当前字段获得焦点时触发。

可以使用focus 和 blur 事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。

change事件则经常用于验证用户在字段中输入的数据。

例子：一个只允许用户输入数值的文本框，利用focus事件修改文本框的背景颜色，表明这个字段获得了焦点，利用blur事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。

EventUtil.addHandler(window, "load", function(event){
            var textbox = document.getElementById("text1");
            
            EventUtil.addHandler(textbox, "focus", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);                
                target.style.backgroundColor = "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 = "";
                }
            });

            textbox.focus();
        });

JavaScript学习笔记（十三）---- 表单事件

相关推荐