22、表单和数据的完整性

表单 <form/>

表单enctype属性：当向服务器端发送数据时，数据应该使用的编码方法。默认是application/x-www-url-encoded，不过，如果要上传文件，可以设置成multipart/form-data。

表单可以以下方式获取

var oForm = document.getElementById('form1'); 
oForm = document.forms[0]; 
oForm = document.forms['form1']; 
oForm = document.form1; 
oForm = form1; 
//IE支持，但fireFox不支持 
oForm = window.form1; 

 获取表单中元素有以下方式

var oFirstField = oForm.elements[0]; 
var oTextbox1 = oForm.elements['textbox1']; 
oTextbox1 = oForm.textbox1; 
oTextbox1 = oForm['textbox1']; 

 

表单元素都有一个form属性，用来指向字段所在的表单。

表单第一个元素获取焦点通用脚本

/*
 * fileName:formutil.js
 */
var FormUtil = new Object;

FormUtil.focusOnFirst = function () {
    if (document.forms.length > 0) {
        for (var i=0; i < document.forms[0].elements.length; i++) {
            var oField = document.forms[0].elements[i];
            if (oField.type != "hidden") {
                oField.focus();
                return;
            }
        }
    }
};

 有两表单元素可以用来提交表单

<input type='submit' value='Submit' /> 
<input type='image' value='submit.gif' /> 

 
如果想提交表单，但又不想使用前面提到的按钮，可使用oForm.submit()方法。但要注意的是submit()方法是不会触发表单的onsubmit事件的。

让表单仅提交一次

<input type='button' value='Submit' onclick='this.disabled=true;this.form.submit()'/> 

 两种重置表单方法

<input type='reset' value='Reset Values'/> 
<input type='button' value='Reset' onclick='document.forms[0].reset()'/> 

 
注：调用表单的reset()方法，会触发表单的onreset事件，这与调用submit()方法不一样。  

选择文本

两种类型的文本框 <input type='text'/>与 <textarea rows='5' cols='25' id='txt2'> </textarea>都支持select()方法，这个方法可选中文本框中的所有文本。为了达到这个功能，文本框必须已经获得焦点。为保证安全选中，必须在调用select()前调用另外一个方法focus()。

文本框事件chang、select

chang：当用户更改内容后文本框失去焦点时发生（注：如果是通过value特性来更改内容时，则不会触发）
select：当一个或多个字符被选中时发生，无论是手工还是用select()方法。

自动选择文本通用脚本

FormUtil.setTextboxes = function() {
    var colInputs = document.getElementsByTagName("input");
    var colTextAreas = document.getElementsByTagName("textarea");
        
    for (var i=0; i < colInputs.length; i++){
        if (colInputs[i].type == "text" || colInputs [i].type == "password") {
            colInputs[i].onfocus = function () { this.select(); };
        }
    }
        
    for (var i=0; i < colTextAreas.length; i++){
        colTextAreas[i].onfocus = function () { this.select(); };
    }
};

 自动切换到下一个输入元素脚本

FormUtil.tabForward = function(oTextbox) {

    var oForm = oTextbox.form;

    //make sure the textbox is not the last field in the 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;
            }
        }
    }
};

 

<input type='text' maxlength='4' onkeyup='FormUtil.tabForward(this)'/> 

限制textarea的最大字符数

因为 <textarea/>没有maxlength属性，所有用JavaScript来模仿maxlength属性，例如：

<textarea rows='5' cols='25' maxlength='150'> </textarea> 

 
注：如果当使用XHTML的严格版本时，如果页面包含未预期的属性，它将会被认为无效。根据对页面的要求，可能需要通过JavaScript为DOM节点添加属性或者直接为函数传递额外的信息，而不能使用HTML属性。

/*
 * fileName:textutil.js
 */
var TextUtil = new Object;

TextUtil.isNotMax = function(oTextArea) {
    return oTextArea.value.length != oTextArea.getAttribute("maxlength");
};

 

<textarea rows='5' cols='25' maxlength='150' onkeypress='return TextUtil.isNotMax(this)'> 
</textarea> 

 
注意：keypress事件是在文本被插入到文本框之前触发 

阻止无效字符

最理想的方法是给HTML <input/>元素添加指定无效的字符的属性，如：

<input type='text' invalidchars='0123456789'/> 

TextUtil.blockChars = function (oTextbox, oEvent) {

    oEvent = EventUtil.formatEvent(oEvent);
         
    var sInvalidChars = oTextbox.getAttribute("invalidchars");
    var sChar = String.fromCharCode(oEvent.charCode);
    
    var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
       
    //注意：按Ctrl键后一定要返回true，因为如果不返回的话，比如用快捷
   //键 Ctrl + C 就不能再使用了。
   return bIsValidChar || oEvent.ctrlKey;

};

<textarea rows="10" cols="25" invalidchars="0123456789" 
onkeypress="return TextUtil.blockChars(this, event)"></textarea> 

允许有效的字符

<textarea rows="10" cols="25" validchars="0123456789V" ></textarea>

 

TextUtil.allowChars = function (oTextbox, oEvent, bBlockPaste) {

    oEvent = EventUtil.formatEvent(oEvent);
         
    var sValidChars = oTextbox.getAttribute("validchars");
    var sChar = String.fromCharCode(oEvent.charCode);
    
    var bIsValidChar = sValidChars.indexOf(sChar) > -1;
    // oEvent.ctrlKey不会屏蔽Ctrl键
    return bIsValidChar || oEvent.ctrlKey;
};

 

<textarea rows="10" cols="25" validchars="0123456789V" 
onkeypress="return TextUtil.allowChars(this, event)"></textarea>

禁止粘贴

阻止用户粘贴内容很容易办到，但必须涵盖各种方法，用户可以通过两种方法粘贴：通过点击文本框上下文菜单（右键点击它）的粘贴选项或者按下Ctrl+V。

在IE中，解决方法简单，因为只有paste事件，如果onpaste事件处理函数阻止默认行为，就不会进行任何粘贴操作，不管用户怎么尝试：

<input type='text' onkeypress='return TextUtil.allowChars
(this,event)' validchars='0123456789' onpaste='return false'/> 

 
关于其他浏览器，这个过程要复杂些，还要通过在oncontextmenu事件处理中返回false来实现：

<input type='text' onkeypress='return TextUtil.allowChars
(this,event)' validchars='0123456789' onpaste='return false' oncontextmenu='return false'/> 

 
以上是禁止右键进行粘贴的。下面还得要禁止Ctrl+V进行粘贴，此时其实就是触发keypress事件，所以只要修改allowChars()和blockChars()方法：

//bBlockPaste:是否禁止粘贴
TextUtil.blockChars = function (oTextbox, oEvent, bBlockPaste) {

    oEvent = EventUtil.formatEvent(oEvent);
         
    var sInvalidChars = oTextbox.getAttribute("invalidchars");
    var sChar = String.fromCharCode(oEvent.charCode);
    
    var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
       
    if (bBlockPaste) {
    		//禁止 用 Ctrl + V 进行粘贴
        return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
    } else {
    		//注意：按Ctrl键后一定要返回true，因为如果不返回的话，比如用快捷
    		//键 Ctrl + C 就不能再使用了。
        return bIsValidChar || oEvent.ctrlKey;
    }
};

TextUtil.allowChars = function (oTextbox, oEvent, bBlockPaste) {

    oEvent = EventUtil.formatEvent(oEvent);
         
    var sValidChars = oTextbox.getAttribute("validchars");
    var sChar = String.fromCharCode(oEvent.charCode);
    
    var bIsValidChar = sValidChars.indexOf(sChar) > -1;
    
    if (bBlockPaste) {
        return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
    } else {
        return bIsValidChar || oEvent.ctrlKey;
    }
};

 

<textarea rows="10" cols="25" validchars="0123456789" 
                onkeypress="return TextUtil.allowChars(this, event, true)"
                onpaste="return false" oncontextmenu="return 
false"></textarea>

 

注：必须同时使用onpaste='retrun false'以及allowChars()和blockChars()方法，因为在IE中无法阻止Ctrl +V按键组合。

下拉框<select/>

 访问下拉框中选项

<select/>元素定义了options集合，它是控件的所有<options/>元素的列表，要获取<option/>的显示文本和值，可以使用一般的DOM方法:

alert(oListbox.options[1].firstchild.nodeValue);
alert(oListbox.options[1].getAttribute('value');

 

使用HTML DOM中<option/>属性会更加简单：

alert(oListbox.options[1].text);
alert(oListbox.options[1].value);

 

每个<option/>也有个index属性，表示它在optons集合中的位置：

alert(oListbox.options[1].index);

 获取/更改选中项

<select/>元素有一个selectedIndex属性，表示目前选中的选项索引，如果未选中，则为-1。

alert('The index of the selected option is ' + oListbox.selectedIndex);

 如果要支持多项选择的话，请设置multiple属性为true，如果选中多个选项，selectedIndex将包含第一个选中选项的索引。

多项选中时，检测哪被选中的所有选项的索引：

/*
 * fileName:listutil.js
 */
var ListUtil = new Object();

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.options.length-1; i >= 0; i--) {
        ListUtil.remove(oListbox, i);
    }
};

移动选项

//把一个选项从一个拉框移动到另一下拉框中
ListUtil.move = function (oListboxFrom, oListboxTo, iIndex) {
    var oOption = oListboxFrom.options[iIndex];

    if (oOption != null) {
        oListboxTo.appendChild(oOption);
    }
};

//把oListbox1中的第一项移到oListbox2中
//ListUtil.move(oListbox1,oListbox2,0);

选项上/下移动

ListUtil.shiftUp = function (oListbox, iIndex) {//上移一个
    if (iIndex > 0) {    
        var oOption = oListbox.options[iIndex];
        var oPrevOption = oListbox.options[iIndex-1];
        oListbox.insertBefore(oOption, oPrevOption);
    }    
};

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);
    }
};

创建自动提示文本框

//从给定的数组中搜索所有匹配的数组选项
TextUtil.autosuggestMatch = function (sText, arrValues) {

    var arrResult = new Array;

    if (sText != "") {
        for (var i=0; i < arrValues.length; i++) {
            //取出所有以sText开头的数组选项
            if (arrValues[i].indexOf(sText) == 0) {
                arrResult.push(arrValues[i]);
            }
        }
    }

   return arrResult;

};

 

<!-- 如下调用 -->
<input type='text' onkeyup="'TextUtil.autosuggest(this,arrValues,'lstSuggestions')"/>

  

//匹配的数组选项放入到下拉框中
TextUtil.autosuggest = function (oTextbox, arrValues, sListboxId) {
    
    var oListbox = document.getElementById(sListboxId);
    //从数组中搜索所有匹配的数组选项
    var arrMatches = TextUtil.autosuggestMatch(oTextbox.value, arrValues);
    
    ListUtil.clear(oListbox);
    //把所有匹配到的数组选项放入到指定的下拉框中去
    for (var i=0; i < arrMatches.length; i++) {
        ListUtil.add(oListbox, arrMatches[i]);
    }
    
};

  

示例：

<html>
    <head>
	<title>Autosuggest Textbox Example</title>
        <script type="text/javascript" src="listutil.js"></script>
        <script type="text/javascript" src="textutil.js"></script>
        <script type="text/javascript">
            var arrColors = ["red", "orange", "yellow", "green", "blue", "indigo", 
                             "violet", "brown", "black", "tan", "ivory", "navy",
                             "aqua", "white", "purple", "pink", "gray", "silver"];
            arrColors.sort();
            
            function setText(oListbox, sTextboxId) {
                var oTextbox = document.getElementById(sTextboxId);
                if (oListbox.selectedIndex > -1) {
                    oTextbox.value = oListbox.options[oListbox.selectedIndex].text;
                }
            }
        </script>
    </head>
    <body>
        <p>Type in a color in lowercase:<br />
        <input type="text" value="" id="txtColor" onkeyup="TextUtil.autosuggest(this, arrColors, 'lstColors')" /><br />
        <select id="lstColors" size="5" style="width: 200px" onclick="setText(this, 'txtColor')"></select>
        </p>
    </body>
</html>