表单基础知识
在JavaScript中,表单对应的是HTMLFormElement 类型,它继承了HTMLElement 。
- 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特性。
document.forms 可以获取页面中的所有表单,返回一个集合,在这个集合中可以通过数值索引或者name值来获取特定的表单。
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中为"form2"的表单
1、提交表单
用户点击按钮或者图像时
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif"> //图像也可以作为提交按钮
在JavaScript中,可以用submit() 方法也可以提交表单。注意:在调用submit() 方法提交表单的时候,不会触发submit 事件。
var form = document.getElementById("myForm");
// 提交表单
form.submit();
阻止提交按钮:
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
2、重置表单
重置按钮:
<input type="reset" value="Reset Form">
<button type="reset">Reset Form</button>
在JavaScript中,可以用 reset() 方法也可以重置表单。注意:在调用 reset() 方法提交表单的时候,会一样触发 reset 事件。
var form = document.getElementById("myForm");
// 重置表单
form.reset();
阻止重置按钮:
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
3、表单字段
每个表单都有一个element 属,它是表单中所有表单元素的集合。是一个有序列表。
var form = document.getElementById("form1");
//取得表单中的的一个字段
var field1 = form.elements[0];
//取得表单中为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含字段的数量
var fieldCount = form.elements.length;
1、共有的表单字段属性
- disabled:布尔值,表示当前字段是否被禁用。
- form:指向当前字段所属表单的指针;只读。
- name :当前字段的名称。
- readonly:布尔值,表示当前字段是否只读。
- tabIndex:表示当前字段的切换( tab)序号。
- type:当前字段的类型,如" checkbox"、“radio”,等等。
- value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件
在计算机中的路径。
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性(不推荐,但对<input>是可行的)
field.type = "checkbox";
防止多次点击提交按钮
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
除了<fieldset>之外 ,所有表单都有 type 属性。但是<input>和<button>元素的 type 属性是可以动态修改的,而<select>元素的 type 属性则是只读的。
2、focus() 和 blur()
focus() 方法用于将浏览器的焦点设置到表单字段上。
blur() 方法把焦点移走。
HTML5中新增一个 autofocus 属性。自动吧焦点设置到相应的字段。
<input type="text" autofocus>
3、共有的字段事件
除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件。
- blur:当前字段失去焦点时触发。
- change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发。
- focus:当前字段获得焦点时触发。
文本框脚本
<input> 单行文本框
- size特性:指定文本框中能够显示的字符数。
- value特性:设置文本框的初值。
- maxlength 特性:指定文本框可以接受的最大字符数。
<input type="text" size="25" maxlength="50" value="aqingya">
<textarea> 多行文本框
- rows:指定文本框中的字符行数
- cols:指定文本框中的字符列数
1、选择文本
select() 方法:用于选择文本框中的所有文本。<inpout>和<textarea>都支持 。
EventUtil.addHandler(textbox, "focus", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});
1、选择(select)事件
选择文本框中的文本就会触发该事件。
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
var alert("Text selected" + textbox.value);
});
2、取得选择的文本
通过select 事件我们知道用户什么时候选择了文本,但是不知道选择了什么样的文本。
两个属性:selectionStart 和selectionEnd 表示选择文本的范围(文本的开头和结尾)
兼容IE8及更早的版本中有一个document. selection对象。
function getSelectedText(textbox) {
if (typeof textbox.selectionStart == "number") {
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
} else if (document.selection) {
return document.selection.createRange().text;
}
}
3、选择部分文本
setSelectionRange() 方法,这个方法接收两个参数:要选择的第一个字符的索引和要 选择的最后一个字符之后的字符的索引(类似于substring()方法的两个参数)。
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"
兼容IE8
createTextRange() 方法
textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length); //"Hello world!"
range.select();
//选择前 3 个字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//选择第4到第6个字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"
跨浏览器方法
function selectText(textbox, startIndex, stopIndex) {
if (textbox.setSelectionRange) {
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange) {
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character", startIndex);
range.moveEnd("character", stopIndex - startIndex);
range.select();
}
textbox.focus();
}
textbox.value = "Hello world!"
//选择所有字符
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
selectText(textbox, 0, 3); //"Hel"
//选择第4到第6个字符
selectText(textbox, 4, 7); //"o w"
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)) && charCode > 9 &&
!event.ctrlKey) {
//屏蔽不符合的按键
EventUtil.preventDefault(event);
}
});
2、操作剪切板
剪切板事件
- beforecopy:在发生复制操作前触发。
- copy :在发生复制操作时触发。
- beforecut:在发生剪切操作前触发。
- cut :在发生剪切操作时触发。
- be forepaste:在发生粘贴操作前触发。
- paste:在发生粘贴操作时触发。
向EventUtil中添加方法
//获取粘贴板内容
getClipboardText: function(event) {
// 兼容浏览器 ,在IE中clipboardData是window对象。
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);
}
},
在需要确保粘贴到文本框中的文本中包含某些字符,或者符合某种格式要求时,能够访问剪贴板是非常有用的。例如,如果一个文本框只接受数值,那么就必须检测粘贴过来的值,以确保有效。在paste事件中,可以确定剪贴板中的值是否有效,如果无效,就可以像下面示例中那样,取消默认的行为。
EventUtil.addHandler(textbox, "paste", function (event) {
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardText(event);
if (!/^\d*$/.test(text)) {
EventUtil.preventDefault(event);
}
});
到目前EventUtil 如下:
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
// 解决浏览器兼容性问题
getEvent: function(event) {
return event ? event : window.event;
},
// 返回事件目标
getTarget: function(event) {
return event.target || event.srcElement;
},
//取消事件的默认行为。
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 移除事件处理程序
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
//提供相关元素的信息,relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
//获取鼠标按钮
/**
* 0: 表示没有按下按钮。
1: 表示按下了主鼠标按钮。
2: 表示按下了次鼠标按钮。
3: 表示同时按下了主、次鼠标按钮
4: 表示按下了中间的鼠标按钮。
5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
7: 表示同时按下了三个鼠标按钮。*/
getButton: function(event) {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//获得鼠标滚轮的增量值delta
getWheelDelta: function(event) {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
//获取字符串编码 主要用于文本框 监听事件是keypress
getCharCode: function(event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
},
//获取粘贴板内容
getClipboardText: function(event) {
// 兼容浏览器 ,在IE中clipboardData是window对象。
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);
}
},
//取消进一步的事件捕获或者冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
4、HTML5 约束验证API
1、必填字段
required 属性:带有required 属性的字段必须填。
<input type="text" name="username" required>
2、其他输入类型
<input type="email" name ="email">
<input type="url" name="homepage">
3、数值范围
比如想让用户只能输入 0 到 100 的值,而且还是5的倍数。·
<input type="number" min="0" max="100" step="5" name="count">
4、输入模式
pattern 属性:这个属性的值的一个正则表达式。用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count">
5、检测有效性
checkValidity() 方法可以检查表单中的某个字段是否有效。所有的表单字段都有这个方法。
话句话说:必填字段中如果没有值就是无效的,而字段中的值与pattern属性不匹配也是无效的。
if (document.forms[0].elements[0].checkValidity()){
//字符有效,继续
} else {
//字符无效
}
要检测整个表单是否有效,可以在表单自身调用checkValidity()方法。如果所有表单字段都有效,这个方法返回true;即使有一一个字段无效,这个方法也会返回false。
if(document.forms[0].checkValidity()){
//表单有效,继续
} else {
//表单无效
}
6、禁用验证
novalidate 属性:设置它,表单就不需要进行验证。
<form method="post" action=" " novalidate>
</form>
formnovalidate 属性:某一个按钮不需要验证。
<input type="submit" name="阿清" value="aqing" formnovalidate>
选择框脚本
选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互,除了所有表单字段共有的属性和方法外,HTMLSelectElement 类型还提供了下列属性和方法。
- add (newoption, relOption): 向控件中插人新<option>元素,其位置在相关项( relOption)之前。
- multiple:布尔值,表示是否允许多项选择;等价于HTML中的multiple特性。
- options:控件中所有<option>元素的HTMLCollection。
- remove ( index) :移除给定位置的选项。
- selectedIndex:基于0的选中项的索引,如果没有选中项,则值为-1。对于支持多选的控件,只保存选中项中第一项的索引。
- size:选择框中可见的行数;等价于HTML中的size特性。
选择框的type属性不是"select-one",就是"select- multiple",这取决于HTML代码中有没有multiple特性。选择框的value属性由当前选中项决定,相应规则如下。
- 如果没有选中的项,则选择框的value属性保存空字符串。
- 如果有一个选中项,而且该项的value特性已经在HTML中指定,则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串,也同样遵循此条规则。
- 如果有一个选中项,但该项的value特性在HTML中未指定,则选择框的value属性等于该项的文本。
- 如果有多个选中项,则选择框的value属性将依据前两条规则取得第一个选中项的值。
举个栗子:
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>
如果用户选择了其中第一项,则选择框的值就是" Sunnyvale, CA"。 如果文本为"China “的选项被选中,则选择框的值就是-一个空字符串,因为其value特性是空的。如果选择了最后一项,那么由于<option>中没有指定value特性,则选择框的值就是” Australia"。
在DOM中,每个<option>元素都有一个HTMLOptionElement 对象表示。为便于访问数据,HTMLOptionElement对象添加了下列属性:(这些属性的目的都是为了方便选项的访问)
- index:当前选项在options集合中的索引。
- label:当前选项的标签;等价于HTML中的label特性。
- selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
- text:选项的文本。
- value:选项的值(等价于HTML中的value特性)。
var selectbox = document.forms[0]. elements["location"];
// 推荐
var text = selectbox.options[0].text; // 选项中的文本
var value = selectbox.options[0].value; //选项的值
1、添加选项
有两种方法
1、使用DOM方法
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
2、添加新选项的方式是使用选择框的add()方法。DOM规定这个方法接受两个参数:要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项,应该将第二个参数设置为null。在IE中第二个参数设置为undefined。
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案
推荐使用第二种
2、移除选项
1、使用DOM方法中的removeChild() 方法
selectbox.removeChild(selectbox.options[0]); //移除第一个选项
2、使用选项框中的remove() 方法
一个参数:移除选项的索引
selectbox.remove(0); //移除第一个选项
3、就是将相应选项设置为null。
selectbox.options[0] = null; //移除第一个选项
3、移动和重排选项
移动:使用DOM中的appendChild() 方法
var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);
移动选项与移除选项有一个共同之处,即会重置每-一个选项的index属性。
重排:使用DOM方法 insertBefore() 方法。
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);
愿你的坚持终有收获。