1. 表单基础知识：
在HTML中，表单由<form>表示；
在JS中，表单由HTMLFormElement类型表示，它继承了HTMLElement。
取得页面中的表单：
var form=document.forms;
Paste_Image.png
1.1 提交表单
只要将button或者input标签的type设置为submit即可提交表单。
浏览器在将请求发送给服务器之前会首先触发submit事件，这样我们可以根据用户输入的内容决定是否发送这个表单。
1.2 重置表单
html中：将其type设置为"reset"
JS中：
var form=document.forms[0];
form.reset();
1.3 表单字段
可以通过elements属性访问表单中的字段。
<form>
<button type="submit" id="button">按钮1</button>
<input type="submit" value="submit"/>
</form>
var form=document.forms[0];
var button=form.elements[0];
var input=form.elements[1];
也可以根据name值访问：
form.elements["button"]==button//true
A. 共有的表单属性：
1. disabled:布尔值，表示是否被禁用。
2. form:指向当前的表单
3. name:当前字段的名称
4. readOnly:当前字段是否为只读
5. type:当前字段的类型：如radio checkbox等
6. value:当前字段被提交给服务器的值。
上述属性除了form外，都可以通过JS进行修改：
如：在一次单击后禁用按钮，以防止用户多次点击：
EventUtil.addHandler(button,"click",function (event) {
alert("a");
button.disabled=true;
});
B. 共有的表单字段方法
focus()和blur()
focus()方法将浏览器的焦点设置到表单字段。
JS方法：
var input=form.elements[1];
input.focus();
html方法：利用autofocus属性
<input type="text" autofocus>
Paste_Image.png
blur()与focus()相反，它为移走焦点。
C. 共有的表单字段事件
1. blur：当前字段失去焦点触发
2. focus:当前字段获得焦点触发
3. change:对于input和textarea元素，失去焦点并且value值改变时触发。对于select元素，选项改变时触发。
var text=form.elements[2];//textarea元素
EventUtil.addHandler(text,"focus",function (event) {//聚焦后将背景颜色设置为黄色
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.style.backgroundColor="yellow";
});
EventUtil.addHandler(text,"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(text,"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="";
}
})
2. 文本框脚本
表示文本框的元素：
input textarea
区别：
input:
单行文本
可以设置显示的字符数size和最大的接收字符数maxlength
<input type="text" size="10" maxlength="12">
textarea:
多行文本
可以通过cols和rows设置列和行数。
<textarea cols="5" rows="5">12345</textarea>
改变值:
在改变值时，都可以使用element.value=""设置。
2.1 选择文本
选中所有文本：select()方法
EventUtil.addHandler(text,"focus",function (event) {//鼠标聚焦时选中所有文本
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.select();
});
Paste_Image.png
A. select事件：
当文本被选中时触发：
EventUtil.addHandler(text,"select",function (event) {
console.log(text.value);
});
B. 获取被选中的文本：
select有两个属性：selectionStart和selectionEnd保存的选中文本的偏移量
EventUtil.addHandler(text,"select",function (event) {
console.log(text.value.substring(text.selectionStart,text.selectionEnd));
});
C. 选择部分文本：setSelectionRange
text.focus();//使用该方法之前或者之后需要将焦点设置到文本框。
text.setSelectionRange(2,3);
Paste_Image.png
2.2 过滤输入：
利用事件和DOM手段，将文本框变为可以理解用户输入数据的功能性控件。
A. 屏蔽字符：
如用户只能输入数字：
EventUtil.addHandler(text,"keypress",function (event) {
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var charCode=EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){//后面两个条件为取消一些退格等功能键以及复制粘贴用的ctrl键
EventUtil.preventDefault(event);
}
})
B. 操作剪贴板：
剪贴板事件：
beforecopy:复制操作前触发。
copy:复制操作时触发。
beforecut:剪切操作前触发。
cut:剪切操作时触发。
beforepaste:粘贴前触发
paste:粘贴时触发。
如何访问剪贴板中的数据：
clipboardData对象。该对象三个方法：getData() setData() clearData()
在EventUtil对象中加入方法：
getClipboardText:function (event) {
var clipboardData=(event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
setClipboardText:function (event,value) {
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
}
例子：如果是数值，则粘贴，否则，不粘贴。
EventUtil.addHandler(textArea,"paste",function (event) {
event=EventUtil.getEvent(event);
var text=EventUtil.getClipboardText(event);
if(!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
})
2.3 . 自动切换焦点
当文本框中达到最大输入字符数量时，自动切换到下一个文本框。
<input type="text" name="tel1" id="textTel1" maxlength="3">
<input type="text" name="tel2" id="textTel2" maxlength="3">
<input type="text" name="tel3" id="textTel3" maxlength="4">
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;i<form.elements.length;i++){//对该表单内的元素进行循环
if(form.elements[i]==target){//找到当前事件的元素
if(form.elements[i+1]) {//如果存在下一个元素，则将下一个元素获得焦点。
form.elements[i+1].focus();
}
return;//如果不存在就停止
}
}
}
}
var text1=document.getElementById("textTel1");
var text2=document.getElementById("textTel2");
var text3=document.getElementById("textTel3");
EventUtil.addHandler(text1,"keyup",tabForward);
EventUtil.addHandler(text2,"keyup",tabForward);
EventUtil.addHandler(text3,"keyup",tabForward);
2.4 HTML5约束验证API
HTML5帮助对表单进行验证。
A. 必填字段：required
<input type="text" maxlength="3" required>
<input type="text" maxlength="3">
<input type="text" maxlength="4">
<button type="submit">提交</button>
Paste_Image.png
B. 其他输入类型：
其他的type类型：如"url" "email"
<input type="email" required>
<input type="text" >
<input type="text" >
<button type="submit">提交</button>
Paste_Image.png
C. 数值范围
type值还有"number" "range" "datatime"等等。下面的例子为输入0-50中的3的倍数。
<input type="number" min="0" max="50" step="3">
<input type="text">
<input type="text">
<button type="submit">提交</button>
Paste_Image.png
D. 输入模式：pattern
利用正则进行匹配
<input type="text" >
<input type="text" pattern="\d+">
<input type="text" >
<button type="submit">提交</button>
Paste_Image.png
E. 检测有效性
如何检测表单是否有效：checkValidity()方法，返回布尔值。
var button=document.getElementsByTagName("button")[0];
EventUtil.addHandler(button,"click",function (event) {
if(document.forms[0].checkValidity()){
//表单有效
}else{
console.log("表单无效")
}
})
还有一个属性：validity可以有更详细的信息显示表单字段的有效性。
F. 禁用验证：
novalidate属性：表单不需要验证。
HTML方法：
<form novalidate>
</form>
JS方法：
document.forms[0].novalidate=true;
formnovalidate属性：作用于某个按钮，当点击该按钮时不验证表单。
HTML方法：
<form novalidate>
<input type="text" >
<input type="text" pattern="\d+">
<input type="text" >
<button type="submit" formnovalidate>提交</button>
</form>
JS方法：
document.getElementsByTagName("button")[0].formNoValidate=true;
3. 选择框脚本
选择框通过select和option标签组成。
<form>
<select name="location" id="selLocation">
<option value="select1">北京</option>
<option value="select2">上海</option>
<option value="select3">山东</option>
</select>
</form>
HTMLSelectElement类型提供了下列的属性和方法：
add(newOption,relOption):在relOption之前插入newOption
options:返回所有的option的HTMLCollection
remove(index):移除给定选项
selectIndex:选中项索引
size:选择框可见行数。
每个option都有下列属性：
index
label
selected:布尔值
text：如上例中的“北京”
value：value值
var selectBox=document.forms[0].elements["location"];
console.log(selectBox.options[0].label)
3.1 选择选项
如何访问选中项：
var selectBox=document.forms[0].elements["location"];
var selectedOption=selectBox.options[selectBox.selectedIndex];
指定选中哪一项：
selectBox.options[1].selected=true;
3.2 添加选项
方法一：操作DOM
var newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("天津"));
selectBox.appendChild(newOption);
方法二：option构造函数
var newOption=new Option("天津","select4");
selectBox.appendChild(newOption);
方法三：选择框的add()方法
var newOption=new Option("天津","select4");
selectBox.add(newOption,1)//索引设为1
3.3 移除选项
方法一：DOM方法
var selectBox=document.forms[0].elements["location"];
selectBox.removeChild(selectBox.options[0]);
方法二：选择框的remove()方法
var selectBox=document.forms[0].elements["location"];
selectBox.remove(0);
3.3 移动和重排选项
利用appendChild属性将选择框1中的option移动到选择框2。（appendChild方法传入一个文档已经存在的元素会将该元素从它的父节点删除然后再添加）
var select1=document.forms[0].elements["location1"];
var select2=document.forms[0].elements["location2"];
select2.appendChild(select1.options[0])
insertBefore方法：
var select1=document.forms[0].elements["location1"];
var select2=document.forms[0].elements["location2"];
var optionMove=select1.options[0];
select2.insertBefore(optionMove,select2.options[1]);
网友评论