表单

2019独角兽企业重金招聘Python工程师标准>>>

关于EventUtil可以参考＜事件＞这篇博客

1.当文本框获得焦点是自动选择其文本

        EventUtil.addHandler(window, "load", function(event){
            var textbox = document.forms[0].elements[0];
            
            EventUtil.addHandler(textbox, "focus", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                target.select();
            });

            textbox.focus();
        }); 

2.获取用户选择的文本

        (function(){
        
            function getSelectedText(textbox){
                if (typeof textbox.selectionStart == "number"){
                    return textbox.value.substring(textbox.selectionStart, 
                            textbox.selectionEnd);                
                } else if (document.selection){
                    return document.selection.createRange().text;
                }
            }
                          
            EventUtil.addHandler(window, "load", function(event){
                var textbox = document.forms[0].elements[0];
    
                EventUtil.addHandler(textbox, "select", function(event){
                    alert(getSelectedText(textbox));
                });
    
                textbox.focus();
            });               
        })();

3.选择一些文本

        (function(){
        
            function selectText(textbox, startIndex, stopIndex){
                if (textbox.setSelectionRange){
                    textbox.setSelectionRange(startIndex, stopIndex);
                } else if (textbox.createTextRange){
                    var range = textbox.createTextRange();
                    range.collapse(true);
                    range.moveStart("character", startIndex);
                    range.moveEnd("character", stopIndex - startIndex);
                    range.select();                    
                }
                textbox.focus();
            }
                          
            var btn = document.getElementById("select-btn");
            EventUtil.addHandler(btn, "click", function(event){
                var textbox = document.forms[0].elements[0];
                selectText(textbox, 4, 7);
                //selectText(textbox,0,textbox.value.length);选择所有文本
            });
            
            
        })();

4.只允许用户输入数字

        (function(){

            var textbox = document.getElementById("txtPhone");
            EventUtil.addHandler(textbox, "keypress", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                var charCode = EventUtil.getCharCode(event);
                //
                if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
                    EventUtil.preventDefault(event);
                }
                
            });
            
        })();

5.自动切换焦点

        (function(){
       
            function tabForward(event){            
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                if (target.value.length == target.maxLength){
                    var form = target.form;
                    
                    for (var i=0, len=form.elements.length; i < len; i++) {
                        if (form.elements[i] == target) {
                            if (form.elements[i+1]){
                                form.elements[i+1].focus();
                            }
                            return;
                        }
                    }
                }
            }
                        
            var textbox1 = document.getElementById("txtTel1"),
                textbox2 = document.getElementById("txtTel2"),
                textbox3 = document.getElementById("txtTel3");
            
            EventUtil.addHandler(textbox1, "keyup", tabForward);        
            EventUtil.addHandler(textbox2, "keyup", tabForward);        
            EventUtil.addHandler(textbox3, "keyup", tabForward);        
                
        })();

6.表单序列化

<!DOCTYPE html>
<html>
<head>
    <title>Form Serialization Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <form method="post" action="javascript:alert('Form submitted!')" id="myForm">
        <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>
        <fieldset>
            <legend>Locations</legend>
            <div>
                <label for="selLocation">Where do you want to live?</label>
                <select name="location" id="selLocation">
                    <option value="Sunnyvale, CA">Sunnyvale</option>
                    <option value="Los Angeles, CA">Los Angeles</option>
                    <option value="Mountain View, CA">Mountain View</option>
                    <option value="">China</option>
                    <option>Australia</option>
                </select>
            </div>
            <div>
                <label for="selLocation2">Where do you want to work?</label>
                <select name="location2" id="selLocation2" multiple size="5">
                    <option value="Sunnyvale, CA">Sunnyvale</option>
                    <option value="Los Angeles, CA">Los Angeles</option>
                    <option value="Mountain View, CA">Mountain View</option>
                    <option value="">China</option>
                    <option>Australia</option>
                </select>
            </div>
        </fieldset>
        <div>
            <label for="comments">Any other comments?</label><br>
            <textarea rows="10" cols="50" id="comments" name="comments"></textarea>
        </div>
        <input type="button" value="Serialize Form" id="serialize-btn">
    </form>     
    <script type="text/javascript">
        function serialize(form){        
            var parts = [],
                field = null,
                i,
                len,
                j,
                optLen,
                option,
                optValue;
            
            for (i=0, len=form.elements.length; i < len; i++){
                field = form.elements[i];
            
                switch(field.type){
                    case "select-one":
                    case "select-multiple":
                    
                        if (field.name.length){
                            for (j=0, optLen = field.options.length; j < optLen; j++){
                                option = field.options[j];
                                if (option.selected){
                                    optValue = "";
                                    if (option.hasAttribute){
                                        optValue = (option.hasAttribute("value") ? option.value : option.text);
                                    } else {
                                        optValue = (option.attributes["value"].specified ? option.value : option.text);
                                    }
                                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                                }
                            }
                        }
                        break;
                        
                    case undefined:     //fieldset
                    case "file":        //file input
                    case "submit":      //submit button
                    case "reset":       //reset button
                    case "button":      //custom button
                        break;
                        
                    case "radio":       //radio button
                    case "checkbox":    //checkbox
                        if (!field.checked){
                            break;
                        }
                        /* falls through */
                                    
                    default:
                        //don't include form fields without names
                        if (field.name.length){
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                        }
                }
            }        
            return parts.join("&");
        }
        
        var btn = document.getElementById("serialize-btn");
        EventUtil.addHandler(btn, "click", function(event){
            var form = document.forms[0];
            alert(serialize(form));
        });

    </script>
</body>
</html>

 

转载于:https://my.oschina.net/langgege/blog/1083542