#JavaScript学习#第十四章：表单脚本1. 表单基础知识 focus：当前字段获得焦点时触发。 2. 文本框脚本

Tips: 内容为知识梳理

1. 表单基础知识

表单由<form>来表示，在js对应HTMLFormElement类型，它有以下独特的属性和方法

acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。

action：接受请求的 URL；等价于 HTML 中的 action 特性。

elements：表单中所有控件的集合（HTMLCollection）。

enctype：请求的编码类型；等价于 HTML 中的 enctype 特性。

length：表单中控件的数量。

method：要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。

name：表单的名称；等价于 HTML 的 name 特性。

reset()：将所有表单域重置为默认值。

submit()：提交表单。

target：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

var form = document.getElementById("form1");可用于获取表单引用
document.forms用于获取所有表单，可document.forms[0]来取得页面第一个表单

1.1 提交表单

用<input>和<button>定义提交按钮，type属性设为sumit，图像按钮则将<input>type设为image

以这种方式提交表单，浏览器会在请求发送给服务器前触发submit事件
var form = document.getElementById("myForm"); EventUtil.addHandler(form, "submit", function(event){ //取得事件对象 event = EventUtil.getEvent(event); //阻止默认事件 EventUtil.preventDefault(event); });用于阻止表单提交
也可以用form.submit()方法直接提交表单

1.2 重置表单

用<input type='reset' value='ehasadas'>或<button type='reset'>来设置重置表单按钮

会触发reset事件
用form.reset()方法也可以重置表单，也会触发reset事件

1.3 表单字段

用form.elements来访问表单字段，可以在后面加[0]或者['name']来访问特定字段

若多个表单字段使用同样的name，则使用name匹配时则返回一个包含这些元素的数组

共有表单字段属性

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

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

name：当前字段的名称。

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

tabIndex：表示当前字段的切换（tab）序号。

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

value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

autofocus：HTML5新增属性，自动将焦点移到这个字段

共有的表达字段方法

focus()方法：将焦点设置到表单字段
blur()方法：一移走表单焦点

共有表单字段事件

blur：失去焦点时触发
change：对于<input>``和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于<select>元素，在其选项改变时触发
focus：当前字段获得焦点时触发。

2. 文本框脚本

<input>元素实现当行文本，size指定能显示的字符数，maxlength指定最大字符数，type特性设置为text
用<textarea>实现多行文本框，rows特性指定行数，cols特性指定列数，value特性用于保存输入的内容

2.1 选择文本

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

select用于选择所有文本

select事件当选择了文本框文本就会触发select事件
取得选择的文本 selectionStart和selectionEnd保存的是选择文本的开头和结尾的偏移量 textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 这行代码即为所选文本
选择部分文本

用setSelectionRange()方法选择部分文体，接受两个参数，开始字符索引和结束字符索引

2.2 过滤输入

1.屏蔽字符输入字符时响应keypress事件，通过这个屏蔽特定字符

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))){ 
EventUtil.preventDefault(event);
 }
});

这行代码用于限定输入数值 2.操作剪贴板下面是6个剪贴板事件

beforecopy：在发生复制操作前触发。
copy：在发生复制操作时触发。
beforecut：在发生剪切操作前触发。
cut：在发生剪切操作时触发。
beforepaste：在发生粘贴操作前触发。
paste：在发生粘贴操作时触发。用clipboardData对象访问剪贴板的数据，它是window或event的属性，他有三个方法：
getData：从剪贴板取得数据，参数为要取得数据的格式（text或url）
setData：第一个参数是数据类型，第二个参数是要放在剪贴板的文本（value）

2.3 自动切换焦点

即在一个文本框达到最大字符后，自动切换到下一个文本框

(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");
 var textbox2 = document.getElementById("txtTel2");
 var textbox3 = document.getElementById("txtTel3");
 EventUtil.addHandler(textbox1, "keyup", tabForward);
 EventUtil.addHandler(textbox2, "keyup", tabForward);
 EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

用这个代码实现自动切换焦点

2.4 HTML5约束验证API

在HTML中标记特定字段浏览器才会自动执行表单验证 1.必填字段如<input required>添加required属性，标注了这个属性表示提交表单时不能空着 2.其他输入类型 <input type='email'>：要求输入文本符合电子邮件模式 <input type='url'>：符合URL模式 3.数值范围 type还有其他的一些类型：number，range，datetime...... 指定min和max属性确定范围，指定step属性确定是谁的倍数 4.输入模式 pattern属性用正则表达式匹配 5.检测有效性用checkValidity()方法检测表单某个字段是否有效，可以在整个表单调用，也可以在表单中的某些字段调用 validity属性

customError ：如果设置了setCustomValidity()，则为true，否则返回false。
patternMismatch：如果值与指定的pattern 属性不匹配，返回true。
rangeOverflow：如果值比max 值大，返回true。
rangeUnderflow：如果值比min 值小，返回true。
stepMisMatch：如果min 和max 之间的步长值不合理，返回true。
tooLong：如果值的长度超过了maxlength 属性指定的长度，返回true。有的浏览器（如Firefox 4）会自动约束字符数量，因此这个值可能永远都返回false。
typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。
valid：如果这里的其他属性都是false，返回true。checkValidity()也要求相同的值。
valueMissing：如果标注为required 的字段中没有值，返回true。 6.禁用验证在表单中设置novalidate属性告诉表单不用验证在表单字段中设置formnovalidate属性告诉表单这个字段不用验证

3. 选择框脚本

选择框通过<select>和<option>创建它们有如下额外的属性和方法：

add(newOption, relOption)：向控件中插入新元素，其位置在相关项（relOption）之前。
multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
options：控件中所有元素的 HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于 HTML 中的 size 特性。

option元素的对象有如下属性：

index：当前选项在 options 集合中的索引。
label：当前选项的标签；等价于 HTML 中的 label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
text：选项的文本。
value：选项的值（等价于 HTML 中的 value 特性）。

3.1 选择选项

用如下代码访问只选择一项的选择框的选中项

var selectedOption = selectbox.options[selectbox.selectedIndex]; 
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
alert("Selected index: " + selectedIndex + "\nSelected text: " +selectedOption.text + "\nSelected value: " + selectedOption.value);

selectbox.options[0].selected = true来设置选中第一项

3.2 添加选项

用如下方法动态添加选项

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

或者用option构造函数创建选项，如下所示

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题

或者用add()方法

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案

3.3 移除选项

代码如下

selectbox.removeChild(selectbox.options[0]); //移除第一个选项
selectbox.remove(0); //移除第一个选项
selectbox.options[0] = null; //移除第一个选项
function clearSelectbox(selectbox){
 for(var i=0, len=selectbox.options.length; i < len; i++){
 selectbox.remove(i);
 }
}

4. 表单序列化

用如下代码序列化一个表单

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: //字段集
 case "file": //文件输入
 case "submit": //提交按钮
	 case "reset": //重置按钮
 case "button": //自定义按钮
 break;

 case "radio": //单选按钮
 case "checkbox": //复选框
 if (!field.checked){
 break;
 }
	 /* 执行默认操作 */
 default:
 //不包含没有名字的表单字段
 if (field.name.length){
 parts.push(encodeURIComponent(field.name) + "=" +
 encodeURIComponent(field.value));
 }
 }
 }
 return parts.join("&");
}

5. 富文本编辑

技术本质：在HTML页面嵌入<iframe>，设置designMode属性，如下

<iframe name="richedit" style="height:100px;width:100px;" src="blank.htm"></iframe>
<script type="text/javascript">
EventUtil.addHandler(window, "load", function(){
 frames["richedit"].document.designMode = "on";
});
</script>

5.1 使用contenteditable属性

在任何元素添加contenteditable属性1，用户即可编辑该元素

5.2 操作富文本

用document.execCommand()方法，三个参数：要执行的命令、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令的值，以下是部分命令

代码如下：

//转换粗体文本
frames["richedit"].document.execCommand("bold", false, null);
//转换斜体文本
frames["richedit"].document.execCommand("italic", false, null);
//创建指向 www.wrox.com 的链接
frames["richedit"].document.execCommand("createlink", false,
 "http://www.wrox.com");
//格式化为 1 级标题
frames["richedit"].document.execCommand("formatblock", false, "<h1>");

也可以对设置了contenteditable属性的元素使用：

//转换粗体文本
document.execCommand("bold", false, null);
//转换斜体文本
document.execCommand("italic", false, null);
//创建指向 www.wrox.com 的链接
document.execCommand("createlink", false,
 "http://www.wrox.com");
//格式化为 1 级标题
document.execCommand("formatblock", false, "<h1>");

5.3 富文本选区

用iframe的getSelection()方法确定实际选择的文本，返回一个Selection对象，有如下属性：

anchorNode：选区起点所在的节点。
anchorOffset：在到达选区起点位置之前跳过的 anchorNode 中的字符数量。
focusNode：选区终点所在的节点。
focusOffset：focusNode 中包含在选区之内的字符数量。
isCollapsed：布尔值，表示选区的起点和终点是否重合。
rangeCount：选区中包含的 DOM 范围的数量

如下方法：

addRange(range)：将指定的 DOM 范围添加到选区中。
collapse(node, offset)：将选区折叠到指定节点中的相应的文本偏移位置。
collapseToEnd()：将选区折叠到终点位置。
collapseToStart()：将选区折叠到起点位置。
containsNode(node)：确定指定的节点是否包含在选区中。
deleteFromDocument()：从文档中删除选区中的文本，与document.execCommand("delete",false, null)命令的结果相同。
extend(node, offset)：通过将 focusNode 和 focusOffset 移动到指定的值来扩展选区。
getRangeAt(index)：返回索引对应的选区中的 DOM 范围。
removeAllRanges()：从选区中移除所有 DOM 范围。实际上，这样会移除选区，因为选区中至少要有一个范围。
reomveRange(range)：从选区中移除指定的 DOM 范围。
selectAllChildren(node)：清除选区并选择指定节点的所有子节点。
toString()：返回选区所包含的文本内容

5.4 表单与富文本

通过添加一个隐藏的表单字段，让他的值等于从iframe提取的HTML，代码如下：

EventUtil.addHandler(form, "submit", function(event){
 event = EventUtil.getEvent(event);
 var target = EventUtil.getTarget(event);
	 target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
});

#JavaScript学习#第十四章：表单脚本

目录