表单脚本
表单的基础知识
-
HTMLFormElement有自己独特的属性和方法
- acceptCharset，服务器能够处理的字符集，等价于HTML中的accept-charset特性
- action，接受请求的URL，等价于HTML中的action特性
- elements，表单中所有控件的集合
- enctype，请求的编码类型，等价于HTML中的enctype特性
- length，表单中控件的数量
- method，要发送的HTTP请求类型，通常是"get"或"post"，等价于HTML的method特性
- name，表单的名称，等价于HTML的name特性
- reset()，将所有表单域重置为默认值
- submit()，提交表单
- target()，用于发送请求和接收响应的窗口名称，等级与HTML的target特性
提交表单
-
用户单击提交按钮或者图像按钮时，就会提交表单，使用<input>或<button>都可以自定义提交按钮，只要将type特性的值设置为"submit"即可
<!--通用提交按钮--> <input type="submit" value="Submit Form"> <!--自定义提交按钮--> <button type="submit">Submit Form</button> <!--图像按钮--> <input type="image" src="graphic.gif"> -
阻止表单提交代码
var form=document.getElelemtById("myForm"); EventUtil.addHandler(form,"submit",function(event){ //取得事件对象 event=EventUtil.getEvent(event); //阻止默认事件 EventUtil.preventDefault(event); }) -
以编程方式提交表单，不会触发submit事件，因此调用方法之前要先验证表单数据
var form=document.getElementById("muForm"); //提交表单 form.submit(); - 提交表单时，可能出现最大的问题就是重复提交表单，在第一次提交表单之后，如果长时间没有反应，用户可能会反复单击提交按钮。解决办法两个，第一次提交之后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作
重置表单
-
在用户单击重置按钮时，表单会被重置，使用type特性值为reset的<input>或<button>都可以创建重置按钮
<!-- 通用重置按钮 --> <input type="reset" value="Reset Form"> <!-- 自定义重置按钮 --> <button type="reset">Reset Form</button> -
阻止重置表单的代码
var form = document.getElementById("myForm"); EventUtil.addHandler(form, "reset", function(event){ //取得事件对象 event = EventUtil.getEvent(event); //阻止表单重置 EventUtil.preventDefault(event); }); -
可以通过JavaScript来重置表单
var form=document.getElementById("myForm"); //重置表单 form.reset(); - 与调用submit()方法不同，调用submit方法会像单击按钮一样触发reset事件
表单字段
-
表单字段公有的属性
- disabled，布尔值，表示当前字段是否被禁用
- form，指向当前字段所属表单的指针。只读
- name，当前字段的名称
- readOnly，布尔值，表示当前字段是否只读
- tabIndex，表示当前字段的切换序号
- type，当前字段类型，如CheckBox
- value当前字段将被提交给服务器的值
-
公有的表单字段方法
- 每个表单都有两个方法，focus()和blur()，其中focus()方法用于将浏览器的焦点设置到表单字段，即激活字段，使其可以响应键盘事件。在调用blur方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走
-
公有的表单字段事件
- blur，当前字段失去焦点时触发
- change，对于input和textarea元素，在失去焦点且value值改变时触发，对于select元素，在选择选项时触发
- focus，当前字段获得焦点时触发
var textbox = document.forms[0].elements[0]; EventUtil.addHandler(textbox, "focus", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.style.backgroundColor != "red"){ target.style.backgroundColor = "yellow"; } }); EventUtil.addHandler(textbox, "blur", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (/[^\d]/.test(target.value)){ target.style.backgroundColor = "red"; } else { target.style.backgroundColor = ""; } }); EventUtil.addHandler(textbox, "change", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (/[^\d]/.test(target.value)){ target.style.backgroundColor = "red"; } else { target.style.backgroundColor = ""; } })
文本框脚本
- 两种方式来表示文本框，input和textarea
选择文本
- 两种文本框都支持select()方法，与select()方法对应的是一个select事件，选择文本框中的文本时，就会触发select事件
- 添加两个属性：selectionStart和selectionEnd，保存的是基于0的数值，表示选择文本的范围
-
所有文本框都有一个setSelectionRange()方法，接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引
textbox.value = "Hello world!" //选择所有文本 textbox.setSelectionRange(0, textbox.value.length); //"Hello world!" //选择前 3 个字符 textbox.setSelectionRange(0, 3); //"Hel" //选择第 4 到第 6 个字符 textbox.setSelectionRange(4, 7); //"o w"
过滤输入
-
剪切板事件
- beforecopy，在发生复制操作前触发
- copy，在发生复制操作时触发
- beforecut，在发生剪切操作前触发
- cut，在发生剪切操作时触发
- beforepaste，在发生粘贴操作前触发
- paste，在发生粘贴操作时触发
自动切换焦点
(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);
})();HTML5约束验证API
-
必填字段
-
指定required属性
<input type="text" name="username" required>
-
-
其他输入类型
-
新增email和url等类型
<input type="email" name="email"> <input type="url" name="homepage">
-
-
数值范围
- number，range，datetime，datetime-local，date，mouth，week，time等
-
输入模式
-
pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值
<input type="text" pattern="\d+" name="count">
-
-
检测有效性
-
checkValidty()方法，检测表单汇总某个字段是否有效，所有表单字段都有这个方法，如果字段有效，返回true，反之返回false
if (document.forms[0].elements[0].checkValidity()){ //字段有效，继续 } else { //字段无效 } - customError，如果设置了setCustomValidity，则为true，否则为false
- patternMismatch，如果值与指定的pattern属性不匹配，返回true
- rangeOverflow，如果值比max值大，返回true
- rangeUnderflow，如果值比min值小，返回true
- stepMisMatch，如果max和min之间的步长值不合适，返回true
- tooLong，如果值的长度超过了maxlength属性指定的长度，返回true
- typeMismatch，如果值不是mail或url返回的格式，返回true
- valid，如果这里的属性都是false，返回true
- valueMissing，如果标注为required的字段中灭有值，返回true
-
-
通过设置novalidate属性，可以告诉表单不进行验证
<form method="post" action="signup.php" novalidate> <!--这里插入表单元素--> </form>
选择框脚本
-
HTMLSelectElement类型提供的属性和方法
- add(newOption, relOption)，向控件中插入新 <option> 元素，其位置在相关项(relOption)之前。
- multiple，布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
- options，控件中所有 <option> 元素的 HTMLCollection 。
- remove(index)，移除给定位置的选项。
- selectedIndex，基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
- size，选择框中可见的行数；等价于 HTML 中的 size 特性
-
选择框的value属性由当前选中项决定，相应规则
- 如果没有选中的项，则选择框的 value 属性保存空字符串。
- 如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
- 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
- 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。
-
为了便于访问数据，HTMLOptionElement对象添加下列属性
- index，当前选项在option集合中的索引
- label，当前选项的标签，等价于HTML中的label特性
- selected，布尔值，表示当前选项是否被选中，将这个属性设置为true可以选中当前选项
- text，选项的文本
- value，选项的值，等价于HTML中的value特性
选择选项
-
对于只允许选择一项的选择框，访问选中项的最简单方式就是使用选择框的selectedIndex属性
var selectedOption=selectbox.opitons[selectbox,selectedIndex]
添加选项
-
添加选项的方式有很多，第一种方式就是使用如下所示的DOM方法
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);//最佳方案
移除选项
-
removeChild()方法，移除选项
selectbox.removeChild(selectbox.options[0]);//移除第一个选项 -
remove()方法，移除选项
selectbox.remove(0);//移除第一个选项 -
将相应的选项设置为null，移除选项
selectbox.options[0]=null;//移除第一个选项
表单序列化
-
浏览器将数据发送给服务器
- 对表单字段的名称和值进行URL编码，使用&符分隔
- 不发送禁用的表单字段
- 只发送勾选的复选框和单选按钮
- 不发送type为"reset"和"button"的按钮
- 多选选择框中的每个选中的值单独一个条目
- 在单击提交按钮提交表单的情况下，也会发送提交按钮，否则不发送提交按钮，也包括type为"image"的<input>元素
- <select>元素的值，就是选中的<option>元素的value特性的值，如果<option>元素没有value特性，则是<option>元素的文本值
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("&"); }
富文本编辑
- 富文本编辑，WYSIWYG(What You See Is What You Get)所见即所得
使用contenteditable
-
这个属性时由IE最早实现的，可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。这种方法之所以受到欢迎，是因为它不需要iframe、空白页和JavaScript，之哟啊哦为元素设置contenteditable属性即可
<div class="editable" id="richedit" contentdeitable></div>
操作富文本
- 与富文本编辑器交互的主要方式就是使用document.execCommand()，这个方法可以对文档执行预定义的命令，而且可以应用大多数格式，可以为document.execCommand()方法传递3个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值，为了确保跨浏览器的兼容性，第二个参数应该始终设置为false，因为Firefox会在该参数为true时抛出错误
富文本选区
-
每个Selection对象的属性
- anchorNode，选取起点所在的节点
- anchorOffset，在到达选区起点位置之前跳过的anchorNode中的字符数量
- focusNode，选区终点所在的节点
- focusOffset，focusNode中包含在选区之内的字符数量
- isCollapse，布尔值，表示选区的起点和终点是否重合
- 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()，返回选区所包含的文本内容。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。