Dict.CN 在线词典, 英语学习, 在线翻译

都市淘沙者

荔枝FM Everyone can be host

统计

留言簿(23)

积分与排名

优秀学习网站

友情连接

阅读排行榜

评论排行榜

Js表单常用处理方法

JavaScript表单处理[JavaScript高级程序设计] 
//表单
var FormUtil = new Object();
//表单中的文本框
var TextUtil = new Object();
//表单中的列表框和组合框<select>
var ListUtil = new Object();

            /*
             * 聚焦于第一个表单字段
             * 接受一个参数：表单Id
             */
            FormUtil.focusFirstField = function(sFormId)
            {
                var oElements = document.getElementById(sFormId).elements;
                for(var i=0; i<oElements.length; i++)
                {
                    if(oElements[i].type != "hidden")
                    {
                        oElements[i].focus();
                        return;
                    }
                }
            };
            
            /*
             * 如何让表单仅提交一次？
             * <input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();" />
             * 不能使用提交按钮并用onclick来实现，因为按钮被禁用在表单被提交之前
             */
            
            /*
             * 为页面中的所有文本框添加 自动选择文本 功能
             * 两种类型的文本框(单行文本框，多行文本框)都支持select()方法，这个方法可以选中文本框中的所有文本
             * 为了达到这个功能，文本框必须已经获得焦点
             */
            FormUtil.setTextboxes = function()
            {
                var colInputs = document.getElementsByTagName("input");
                var colTextAreas = document.getElementsByTagName("textarea")
                for(var i=0; i<colInputs.length; i++)
                {
                    var obj = colInputs[i];
                    if(obj.type == "text" || obj.type == "password")
                    {
                        obj.onfocus = function(){this.select();}
                    }
                }
                for(var i=0; i<colTextAreas.length; i++)
                {
                    colTextAreas[i].onfocus = function(){this.select();}
                }
            };
            
            /*
             * 自动切换功能
             * 当用户输入字符个数达到文本框所允许的最大数量字符时，自动切换到下一个字段
             * 前提：文本框具有maxlength属性
             * 接受一个参数：文本框本身
             * 此方法必须在输入每一个字符后调用，所以需要使用onkeyup事件处理函数
             */
            FormUtil.tabForward = function(oTextbox)
            {
                var oForm = oTextbox.form;
                if(oForm.elements[oForm.elements.length-1] != oTextbox && oTextbox.value.length == oTextbox.maxLength)
                {
                    for(var i=0; i<oForm.elements.length; i++)
                    {
                        if(oForm.elements[i] == oTextbox)
                        {
                            for(var j=i+1; j<oForm.elements.length ; j++)
                            {
                                if(oForm.elements[j].type != "hidden")
                                {
                                    oForm.elements[j].focus();
                                    return;
                                }
                            }
                            return;
                        }
                    }
                }
            };
            
            
            /*
             * 限制textarea的字符数
             * <textarea>元素并没有maxlength属性，解决方法是用JavaScript来模仿maxlength特性
             * 原理：isNotMax()的返回值被传给事件处理函数，这是一种阻止事件默认行为发生的原始的方法
             * 当文本长度小于imax时，方法返回true,表示keypress事件可以继续发生。
             * 另外，方法的调用必须放到onkeypress事件处理函数中，keypress事件是在文本被插入到文本框之前触发的
             * 注意：需要为textarea添加maxlength(尽管无效),但使用XHTML的严格版本时，如果页面包含未预期的特性将会被认为无效
             * 根据页面的要求，可能需要通过JavaScript为DOM结点添加特性或者直接为函数传递额外的信息，而不能使用HTML特性
             * 接受两个参数，第二个参数可选择
             * Example:
             * <textarea rows="10" cols="25" maxlength="150" onkeypress="return TextUtil.isNotMax(this,200)"></textarea>
             */
            TextUtil.isNotMax = function(oTextArea,iMaxLength)
            {
                var imax;
                if(iMaxLength)
                   imax = iMaxLength;
                else
                   imax = oTextArea.getAttribute("maxlength");
                return oTextArea.value.length != imax;
            };
            
            /*
             * 很多开发人员会遗忘的文本验证的一个重要方面就是用户可以直接向文本框粘贴内容
             * 有两种方法来处理粘贴内容的验证：禁止粘贴 当文本框失去焦点时验证
             * 1.禁止粘贴方法
             * 用户可以通过点击上下文菜单来粘贴或者按下Ctrl+V
             * 在IE中解决方法很简单，因为有paste事件，如果paste事件处理函数阻止默认行为就不会进行任何粘贴操作
             * 关于其他浏览器，首先要做的是阻止上下文菜单，可以通过oncontextmenu事件处理函数中返回false来实现
             * 然后要阻止用户按下Ctrl+V进行的粘贴
             * 2.失去焦点时验证
             */
            //此方法须与blockChars一起使用
            TextUtil.blurBlock = function(oTextbox)
            {
                var sInvalidChars = oTextbox.getAttribute("invalidchars");
                //以空字符串为参数调用split方法将分割字符串的每个字符
                var arrInvalidChars = sInvalidChars.split("");
                
                for(var i=0; i<arrInvalidChars.length; i++)
                {
                    if(oTextbox.value.indexOf(arrInvalidChars[i]) > -1)
                    {
                        alert("Character '" + arrInvalidChars[i] + "' not allowed!");
                        oTextbox.focus();
                        oTextbox.select();
                        return;
                    }
                }
            };
            //此方法与allowChars一起使用
            TextUtil.blurAllow = function(oTextbox)
            {
                var sValidChars = oTextbox.getAttribute("validchars");
                var arrTextChars = oTextbox.value.split("");
                
                for(var i=0; i<arrTextChars.length; i++)
                {
                    if(sValidChars.indexOf(arrTextChars[i]) == -1)
                    {
                        alert("Character '" + arrTextChars[i] + "' not allowed.");
                        oTextbox.focus();
                        oTextbox.select();
                        return ;
                    }
                }
            };
            /*
             * 阻止文本框中的字符
             * 需要阻止文本框粘贴，bBlockPaste设置为true
             */
            TextUtil.blockChars = function(oEvent,oTextbox,bBlockPaste)
            {
                oEvent = EventUtil.formatEvent(oEvent);
                var sInvalidChars = oTextbox.getAttribute("invalidchars");
                var sChar = String.fromCharCode(oEvent.charCode);
                
                var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
                /*
                 * 用户可能按下Ctrl键，再按其他字符(例如Ctrl+C)，所以如果按下Ctrl键也返回true
                 */
                if(bBlockPaste)
                {
                    return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
                }
                else return bIsValidChar || oEvent.ctrlKey;
            };
            /*
             * 允许有效的字符
             * 需要阻止文本框粘贴，bBlockPaste设置为true
             */
            TextUtil.allowChars = function(oEvent,oTextbox,bBlockPaste)
            {
                oEvent = EventUtil.formatEvent(oEvent);
                var sChar = String.fromCharCode(oEvent.charCode);
                var sValidChars = oTextbox.getAttribute("validchars");
                var bIsValidChar = sValidChars.indexOf(sChar) >= 0;
                
                if(bBlockPaste)
                {
                    return bIsValidChar && !(oEvent.ctrlKey && sChar =="v");
                }
                else return bIsValidChar || oEvent.ctrlKey;
            };
            
            
            /*
             * <select>默认情况下渲染成组合框，如果添加size属性则渲染成列表框
             * 可以在列表框中选择多个选项（组合框不能),只要添加multiple属性为"multiple"
             * 如果允许多个选项，selectedIndex将包含第一个选中的索引,但这没有多大用途
             */
            ListUtil.getSelectedIndexes = function(oListbox)
            {
                var arrIndexes = new Array();
                for(var i=0; i<oListbox.options.length; i++)
                {
                    if(oListbox.options[i].selected)
                        arrIndexes.push(i);
                }
                return arrIndexes;
            };
            
            //添加选项     第三个参数：选项值并非必要
            ListUtil.add = function(oListbox,sName,sValue)
            {
                var oOption = document.createElement("option");
                oOption.appendChild(document.createTextNode(sName));
                if(arguments.length == 3)
                {
                    oOption.setAttribute("value",sValue);
                }
                
                oListbox.appendChild(oOption);
            };
            
            // 删除某个选项
            ListUtil.remove = function(oListbox,iIndex)
            {
                oListbox.remove(iIndex);
            };
            
            //清除所有选项
            ListUtil.clear = function(oListbox)
            {
                for(var i=oListbox.length-1; i>=0; i--)
                {
                    ListUtil.remove(oListbox,i);
                }
            };
            
            /*
             * 移动选项
             * 将选项从一个列表框移动到另一个列表框
             * 使用DOM appendChild方法，如果将已经存在于文档中的元素传递给这个方法，那么会将这个元素从原来父结点中删除
             */
            ListUtil.move = function(oListboxFrom, oListboxTo, iIndex)
            {
                var oOption = oListboxFrom.options[iIndex];
                
                if(oOption != null)
                {
                    oListboxTo.appendChild(oOption);
                }
            };
            
            //重新排序选项之向上移动
            ListUtil.shiftUp = function(oListbox, iIndex) 
            {
                if(iIndex>0)
                {
                    var oOption = oListbox.options[iIndex];
                    var oPreOption = oListbox.options[iIndex-1];
                    oListbox.insertBefore(oOption,oPreOption);
                }
            };
            
            //重新排序选项之向下移动
            ListUtil.shiftDown = function(oListbox, iIndex)
            {
                if(iIndex < oListbox.options.length-1)
                {
                    var oOption = oListbox.options[iIndex];
                    var oNextOption = oListbox.options[iIndex+1];
                    oListbox.insertBefore(oNextOption,oOption);
                }
            };
             

posted on 2008-09-26 15:56 都市淘沙者 阅读(941) 评论(0)  编辑  收藏 所属分类: JSP/PHP


只有注册用户登录后才能发表评论。
网站导航: