第十四章 表单脚本
一、表单的基础知识
在HTML中，表单是由<form>元素来表示的，在JavaScript中，表单对应的是HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而与其他HTML元素具有相同的默认属性。不过，HTMLFormElement有自己独有的属性和方法。
在javaScript中可以提交表单、重置表单以及操作表单的字段。
下面是一个例子：
假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。
实现代码：
1 <html> 2 <head> 3 </head> 4 <body> 5 <form method="post" id="myForm">表单<br> 6 <input type="text" size="20" maxlength="50" value="mytext"> 7 </form> 8 <script type="text/javascript" src="myscript.js"></script> 9 </body> 10 </html>
1 var EventUtil = { 2 addHandler: function(element,type,handler){ 3 if(element.addEventListener){ 4 element.addEventListener(type,handler,false); 5 }else if(element.attachEvent){ 6 element.attachEvent("on"+type,handler); 7 }else{ 8 element["on"+type]=handler; 9 } 10 }, 11 removeHandler: function(element,type,handler){ 12 if(element.removeEventListener){ 13 element.removeEventListene(type,handler,false); 14 }else if(element.detachEvent){ 15 element.detachEvent("on"+type,handler); 16 }else{ 17 element["on"+type] = null; 18 } 19 }, 20 getEvent : function(event){ 21 return event ? event : window.event; 22 }, 23 getTarget:function(event){ 24 return event.target||event.srcElement; 25 }, 26 preventDefault:function(event){ 27 if(event.preventDefault){ 28 event.preventDefault(); 29 }else{ 30 event.returnValue=false; 31 } 32 }, 33 stopPropagation:function(event){ 34 if(event.stopPropagation){ 35 event.stopPropagation(); 36 }else{ 37 event.cancelBubble=true; 38 } 39 } 40 }; 41 42 var textbox = document.forms[0].elements[0]; //取得text元素 43 44 EventUtil.addHandler(textbox,"focus",function(event){ //当前字段获得焦点时触发 45 event = EventUtil.getEvent(event); 46 var target = EventUtil.getTarget(event); 47 if(target.style.backgroundColor!="red"){ 48 target.style.backgroundColor = "yellow"; 49 } 50 textbox.select();//选中文本框中的所有文本 51 }); 52 EventUtil.addHandler(textbox,"blur",function(event){ //当前字段失去焦点时触发 53 event = EventUtil.getEvent(event); 54 var target = EventUtil.getTarget(event); 55 if(/[^\d]/.test(target.value)){ //为非数值时 56 target.style.backgroundColor = "red"; 57 }else{ 58 target.style.backgroundColor = ""; 59 } 60 }); 61 EventUtil.addHandler(textbox,"change",function(event){ 62 //<input>和<textarea>元素，在它们失去焦点且value值改变时触发,对于<select>元素,在其选项改变时触发。 63 event = EventUtil.getEvent(event); 64 var target = EventUtil.getTarget(event); 65 if(/[^\d]/.test(target.value)){ 66 target.style.backgroundColor = "red"; 67 }else{ 68 target.style.backgroundColor = ""; 69 } 70 });
二、文本框脚本
在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。
使用文本框可以用下面的代码：
<input type="text" size="25" maxlength="50" value="initial value"> <textarea rows="25" cols="5">initial value</textarea>
JavaScript中对文本框常见的操作有：选择文本、过滤输入、自动切换焦点等；
下面的代码可以实现跨浏览器选择文本：
1 function selectText(textbox,startIndex,stopIndex){ 2 if(textbox.setSelectionRange){ 3 textbox.setSelectionRange(startIndex,stopIndex); 4 }else if(textbox.createTextRange){ 5 var range = textbox.createTextRange(); 6 range.collapse(true); 7 range.moveStart("character",startIndex); 8 range.moveEnd("character",stopIndex-startIndex); 9 range.select(); 10 } 11 textbox.focus(); 12 } 13 14 var textbox = document.forms[0].elements[0]; 15 //设textbox.value="hello world!"; 16 selectText(textbox,1,3); //"el" 17 selectText(textbox,2,7); //"llo w"
自动切换焦点：使用JavaScript可以从多个方面增强表单字段的易用性。其中，常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。
下面是一个例子：例如，美国的电话号码通常会分为三部分：区号、局号和另外4位数字。为取得完整的电话号码，很多网页中都会提供下列 3个文本框：
1 <input type="text" name="tel1" id="txtTel1" maxlength="3"> 2 <input type="text" name="tel2" id="txtTel2" maxlength="3"> 3 <input type="text" name="tel3" id="txtTel3" maxlength="4">
为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到大数量后，自动将焦点切换到下一个文本框。换句话说，用户在第一个文本框中输入了 3个数字之后，焦点就会切换到第二个文本框，再输入3个数字，焦点又会切换到第三个文本框。这种“自动切换焦点”的功能，可以通过下列代码实现：
1 (function (){ 2 function tabForward(event){ 3 event = EventUtil.getEvent(event); 4 var target = EventUtil.getTarget(event); 5 if(target.value.length==target.maxLength){ 6 var form = target.form; 7 for(var i=0, len=form.elements.length;i<len;i++){ 8 if(form.elements[i+1]==target){ 9 if(form.elements[i+1]){ 10 form.elements[i+1].focus(); 11 } 12 return; 13 } 14 } 15 } 16 } 17 var textbox1 = document.getElementById("txtTel1"); 18 var textbox2 = document.getElementById("txtTel2"); 19 var textbox3 = document.getElementById("txtTel3"); 20 EventUtil.addHandler(textbox1,"keyup",tabForward); 21 EventUtil.addHandler(textbox2,"keyup",tabForward); 22 EventUtil.addHandler(textbox3,"keyup",tabForward); 23 })();
三、选择框脚本
选择框也是经常要通过JavaScript来控制的一个表单字段。由于有了 DOM，对选择框的操作比以前要方便多了。添加选项、移除选项、将选项从一个选择框移动到另一个选择框，甚至对选项进行排序等操作，都可以使用标准的DOM技术来实现。
以下面的选择框为例：
1 <select name="location" id="selLocation"> 2 <option value="Sunnyvale, CA">Sunnyvale</option> 3 <option value="Los Angeles, CA">Los Angeles</option> 4 <option value="Mountain View, CA">Mountain View</option> 5 <option value="">China</option> 6 <option>Australia</option> 7 </select>
1 function getSelectedOptions(selectbox){ 2 var result = new Array(); 3 var option = null; 4 for (var i=0, len=selectbox.options.length; i < len; i++){ 5 option = selectbox.options[i]; 6 if (option.selected){ 7 result.push(option); 8 } 9 } 10 return result; 11 }
这个函数返回给定选择框中选中项的一个数组。首先，创建一个将包含选中项的数组，然后使用 for 循环迭代所有选项，同时检测每一项的selected 属性。如果有选项被选中，则将其添加到 result 数组中。最后，返回包含选中项的数组。下面是一个使用上面的函数取得选中项的示例。
1 var selectbox = document.getElementById("selLocation"); 2 var selectedOptions = getSelectedOptions(selectbox); 3 var message = ""; 4 for (var i=0, len=selectedOptions.length; i < len; i++){ 5 message += "Selected index: " + selectedOptions[i].index + 6 "\nSelected text: " + selectedOptions[i].text + 7 "\nSelected value: " + selectedOptions[i].value + "\n\n"; 8 } 9 alert(message);
在这个例子中，先从一个选择框中取得了选中项。然后，用 for 循环构建了一条消息，包含所有选中项的信息。这种技术适用于单选和多选选择框。
四、富文本编辑
富文本编辑功能是通过一个包含空 HTML文档的 iframe 元素来实现的。通过将空文档的designMode属性设置为"on"，就可以将该页面转换为可编辑状态，此时其表现如同字处理软件。另外， 也可以将某个元素设置为contenteditable。在默认情况下，可以将字体加粗或者将文本转换为斜体，还可以使用剪贴板。
JavaScript通过使用 execCommand()方法也可以实现相同的一些功能。另外，使用 queryCommandEnabled()、queryCommandState()和 queryCommandValue()方法则可以取得有关文本选区的信息。由于以这种方式构建的富文本编辑器并不是一个表单字段，因此在将其内容提交给服务器之前，必须将iframe或contenteditable元素中的HTML复制到一个表单字段中。