说明：本文为《JavaScript高级程序设计》第11章“表单与数据完整性”学习笔记
一． 表单基础
HTML表单是通过<form/>元素来定义的，它有以下特性：
method——表示浏览器发送GET请求或是发送POST请求；
action——表示表单所要提交到的地址URL；
enctype——当向服务器发送数据时，数据应该使用的编码方法。默认是application/x-www-url-encoded，不过，如果要上传文件，可以设置为multipart/form-data；
accept——当上传文件时，列出服务器能正确处理的mime类型；
accept-charset——当提交数据时，列出服务器接受的字符编码；
表单可以包含任意数量的输入元素：
<input/>——主要的HTML输入元素。通过type特性来判断是哪种输入控件：
text——单行文本框；
radio——单选按钮；
checkbox——复选框
file——文件上传文件框
password——密码输入框；
button——可用来产生自定义动作的一般按钮；
submit——提交按钮；
reset——重置按钮；
hidden——不会出现在屏幕上的输入字段；
image——图像，与提交按钮功能一样。
<select/>：用来渲染组合框或者下拉列表框，里面的值由<option/>元素定义；
<textarea/>：渲染多行文本框，尺寸由rows和cols特性来确定。
二． 对<form/>元素进行脚本编写
1． 获取表单的引用
Eg1. var oForm = document.getElementById(“form1”);
Eg2. var oForm = document.forms[0]; //获取第一个form
Eg3. var oForm = document.forms[“form1”]; //根据名称
2． 访问表单字段
Eg1. var oFirstField = oForm.elements[0]; // 获取第一个表单元素
Eg2. var oTextbox1 = oForm.elements[“textbox1”]; //获取名称为textbox1的表单元素
Eg3. var oTextbox1 = oForm.textbox1; //获取名称为textbox1的表单元素
在名称中有空格时，可以使用方括号标记：
var oTextbox1 = oForm[“text box 1”];
说明：也可以用document.getElementById()和表单字段的id来直接获取元素。
3． 表单字段的共性
disabled特性可用来获取或设置表单控件是否被禁用（被禁用的控件禁止用户输入）；
form特性用来指向字段所在的表单；
blur()方法可以使表单字段失去焦点；
focus()可以使表单字段获取焦点；
当字段失去焦点时，发生blur事件，执行onblur()事件处理函数；
当字段获取焦点时，发生focus事件，执行onfocus()事件处理函数。
注意：隐藏字段只支持form特性。
4． 聚焦于第一个字段
可用如下代码实现：
document.forms[0].elements[0].focus();
但这样做还有点问题，如果表单的某个元素是隐藏字段，这个字段是不支持focus()方法的，这时候会出现JavaScript错误。我们需要的是将焦点放在第一个可见的表单字段上，可参考如下实现：
var FormUtil = new Object;
FormUtil.focusObject = function() {
if (document.forms.length > 0) {
for (var i=0; i<document.forms[0].elements.length; i++ ) {
var oField = document.forms[0].elements[i];
if (oField.type != “hidden”) {
oField.focus();
return;
}
}
}
}
调用举例如下：
<body onload=”FormUtil.focusOnFirst()”>
5. 提交表单
在普通HTML中，必须使用提交按钮或扮演提交按钮角色的图像来提交表单：
<input type=”submit” value=”提交” />
<input type=”image” src=”submit.gif” />
当用户点击其中一个按钮，无需其他编码，就可以提交表单。如果按回车键，并存在这些按钮，浏览器就会认为是点击了按钮。
可以通过action特性中加入警告框来检测表单是否已被提交：
<form method=”post” action=”javascript:alert(‘提交表单’)”>
还可以调用submit()方法提交表单：
Eg1. oForm.submit();
Eg2. <input type=”button” value=”提交” onclick=”document.forms[0].submit()” />
可以使用onsubmit()方法来检查表单输入的合法性：
<form method=”post” action=”javascript:alert(‘提交表单’)” onsubmit=”handleSubmit()”>
6. 仅提交一次
为防止表单多次提交，可使用如下方法：
将<input type=”submit” value=”提交”/>替换成：
<input type=” button” value=”提交” onclick=”this.disabled=true;this.form.submit()”/>
说明：不使用提交按钮并用onclick()来禁用它的原因是，按钮其实在表单提交前就已被禁用，这将导致表单不被提交。
7．重置表单
Eg1. <input type=”rest” value=”重置”/>
Eg2. <form method=”post” action=”javascript:alert(‘提交’)” onreset=”alert(‘正在重置’)” />
Eg3. <input type=”button” value=”重置” onclick=”document..forms[0].reset()” />
三． 文本框
Eg1. <input type=”text” size=”25” maxLength=”50” value=”阿蜜果” name=”nickName” />
Eg2. <textarea rows=”25” cols=”5”>文本值</textarea>
1. 获取/更改文本框的值
eg1. var oTextbox1 = document.getElementById(“txt1”);
alert(oTextbox1.value);
alert(oTextbox1.value.length);
eg2. var oTextbox1 = document.getElementById(“txt1”);
oTextbox1.value = “hello,阿蜜果”;
2. 选择文本
可使用select()方法，调用该方法前，文本框必须首先获取焦点。参考代码阿如下：
var oTextbox1 = document.getElementById(“txt1”);
oTextbox1.focus();
oTextbox1.select();
3. 文本框事件
blur——文本框失去焦点时触发；
focus——文本框获取焦点时触发；
change——当用户更改内容后文本框失去焦点时发生（如果是通过value特性来更改内容，则不会触发）；
select——当一个或多个字符被选中时发生，无论是手工选中还是用select()方法。
4. 选择文本
Eg1. <input type=”text” onfocus=”this.select()” />
Eg2. <textarea onfocus=”this.select()”></textarea>
5. 自动切换到下一个
当某个文本框只允许接受指定数量的字符串时，常需要自动切换到下一个字段，让我们来看看其实现：
FormUtil.tabForward = fuction(oTextbox) {
var oForm = oTextbox.form.
//确保该文本框不是表单的最后一个字段
if (oForm.elements[oForm.elements.length- 1] == oTextbox
&& oTextbox.value.length == oTextbox.getAttribute(“maxLength”)) {
for (var i=0; i<oForm.elements.length; i++) {
if (oForm.elements[i] == oTextbox) {
for (var j=i+1; j<oForm.elements.length; j++) {
if (oForm.elements[j].type != “hidden”) {
oForm.elements[j].focus();
return;
}
}
}
}
}
}
调用举例：
<input type=”text” maxLength=”4” onkeyup=”FormUtil.tabForward(this)” />
6. 限制textarea的字符数
TextUtil.inNotMax = function(oTextarea) {
Return oTextarea.value.length = oTextarea.getAttribute(“maxlength”);
}
调用举例如下：
<textarea rows=”10” cols=”25” maxlength=”150” onkeypress=”return TextUtil.isNotMax(this)”></textarea>
7. 允许/阻止文本框中的字符
1） 阻止无效的字符
TextUtil.blockChars = function(oTextbox, oEvent) {
oEvent = EventUtil.formatEvent(oEvent);
var sInvalidChars = oTextbox.getAttribute(“invalidchars”);
var sChar = String.fromCharCode(oEvent.charCode);
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
return bIsValidChar || oEvent.ctrlKey;
};
调用举例如下：
Eg1. <input type=”text” invalidchars = “0123456789” onkeypress=”return TextUtil.blockChars(this, event)” />;
Eg2. <textarea rows=”10” cols=”25” invalidchars = “0123456789” onkeypress=”return TextUtil.blockChars(this, event)” />;
2） 允许有效的字符
TextUtil.allowChars = function(oTextbox, oEvent) {
oEvent = EventUtil.formatEvent(oEvent);
var sValidChars = oTextbox.getAttribute(“validchars”);
var sChar = String.fromCharCode(oEvent.charCode);
var bIsValidChar = sInvalidChars.indexOf(sChar) > -1;
return bIsValidChar || oEvent.ctrlKey;
};
调用举例如下：
Eg1. <input type=”text” validchars = “0123456789” onkeypress=”return TextUtil.allowChars (this, event)” />;
Eg2. <textarea rows=”10” cols=”25” validchars = “0123456789” onkeypress=”return TextUtil.allowChars (this, event)” />;
3） 不要忘记粘贴
用下面两个方法来处理粘贴内容的验证：
l 禁止粘贴
用户可以通过两种方法粘贴：通过点击文本框上下文菜单的粘贴选项或按下Ctrl+V.
在IE中，可用onpaste方法解决，在其它浏览器中，可通过oncontextmenu事件处理函数解决，举例如下：
<input type=”text” onkeypress=”return TextUtil.allowChars(this, event)” validChars=”0123456789” onpaste=”return false” oncontextmenu=”return false” />
要防止用户按下Ctrl+V进行的粘贴，其实就是按下Ctrl和V，触发keypress事件，修改allowChars()和blockChars()的最后一句为：
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == ‘v’);
} else {
return bIsValidChar || oEvent.ctrlKey;
}
说明：其中bBlockPaste由函数作为参数传入。
l 失去焦点时验证
TextUtil.blurBlock = function(oTextbox) {
var sInvalidChars =oTextbox.getAttribute(“invalidchars”);
var arrInvalidChars = sInvalidChars.split(“”);
for (var i=0; i< arrInvalidChars.length; i++) {
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {
alert(“字符：” + arrInvalidChars[i] + “不允许输入！”);
oTextbox.focus();
oTextbox.select();
return;
}
}
}
调用举例如下：
<input type=”text” invalidchars = “0123456789” onkeypress=”return TextUtil.blockChars(this, event)” onblur=”TextUtil.blurBlock(this)” />;
8. 使用上下文按键操作数字文本
有时候我们想使用上下按键来增加和减少数字，为实现它，需要使用onkeydown事件处理函数。为了确保只是上下按键，要使用event的keyCode特性，上键的代码是38，下键的是40，其他按键都回被忽略。下面来看实现这个功能的实现代码：
TextUtil.numericScoll = function(oTextbox, oEvent) {
oEvent = EventUtil.formatEvent(oEvent);p
var iValue = oTextbox.value.length == 0 ? 0: parseInt(oTextbox.value);
var iMax = oTextbox.getAttribute(“max”);
var iMin = oTextbox.getAttribute(“min”);
if (oEvent.keyCode == 38) {
if (iMax == nul || iValue < parseInt(iMax)) {
oTextbox.value = (iValue + 1);
}
} else if (oEvent.keyCode == 40) {
if (iMin == nul || iValue < parseInt(iMin)) {
oTextbox.value = (iValue - 1);
}
}
};
调用举例：
<input type=”text” onkeypress=”return TextUtil.allowChars(this, event)” vaidchars=”0123456789” onblur=”TextUtil.blurAllow(this)” onkeydown=”TextUtil.numericScroll(this, event)” max=”100” min=”0” />
四． 列表框和组合框
列表框和组合框都是通过HTML的<select/>元素来创建的。默认情况下，浏览器会将<select/>元素渲染成组合框。
Eg. <select name=”selAge” id=”selAge”>
<option value=”1”>18-21</option>
<option value=”2”>12-25</option>
<option value=”3”>16-29</option>
</select>
1. 访问选项
Eg. var oListbox = document.forms[“form1”].selAge;
alert(oListbox.options[1].firstChild.nodeValue); //显示text
alert(oListbox.options[1].getAttribute(“value”)); //显示值
也可以用如下代码阿实现：
alert(oListbox.options[1].text); //显示text
alert(oListbox.options[1].value); //显示值
alert(oListbox.options[1].index); //显示1
alert(oListbox.options.length); //显示列表长度
2．获取/更改选中项
oListbox.selectedIndex显示的是目前选中的选项的索引（如果没有选中任何选项，那么为-1）;
若<select/>中加上了属性multiple=” multiple”时，存在选中多个选项的情况，可用如下方法来获取选中的元素：
ListUtil.getSelectedIndexs = function(oListbox) {
var arrIndexes = new Array;
for (var i=0; i<oListbox.options.length; i++) {
if (oListbox.options[i].selected) {
arrIndexes.push(i);
}
}
return arrIndexes;
};
3．添加选项
ListUtil.add = function(oListbox, sName, sValue) {
var oOption = document.createElement(“option”);
oOption.appendChild(document.createTextNode(sName));
if (arguments.length == 3) {
oOption.setAttribute(“value”, sValue);
}
oListbox.appendChild(oOption);
}
4. 删除选项
删除列表中的某个选项，可用如下代码：
ListUtil.remove = function(oListbox, iIndex) {
oListbox.remove(iIndex);
}
删除列表中的所有选项：
ListUtil.clear = function(oListbox) {
for (int i=oListbox.options.length -1; i++) {
ListUtil.remove(oListbox, i);
}
}
5. 移动选项
ListUtil.move = function(oListboxFrom, oListboxTo, iIndex) {
var oOption = oListboxFrom.options[iIndex];
if (oOption != null) {
oListboxTo.append(oOption);
}
}
6. 重新排序选项
ListUtil.shiftUp = function(oListbox, iIndex) {
if (iIndex > 0) {
var oOption = oListbox.options[iIndex];
var oPrevOption = oListbox.options[iIndex - 1];
oListbox.insertBefore(oOption, oPrevOption);
}
}
ListUtil.shiftDown = function(oListbox, iIndex) {
if (iIndex > 0) {
var oOption = oListbox.options[iIndex];
var oNextOption = oListbox.options[iIndex + 1];
oListbox.insertBefore(oNextOption , oOption);
}
}
五． 创建自动提示的文本框
1. 匹配
TextUtil.autosuggestMatch = function(sText, arrValues) {
var arrResult = new Array;
if (sText != “”) {
for (var i=0; i<arrValues.length; i++) {
if (arrValues[i].indexOf[sText] == 0) {
arrResult.push[arrValues[i]];
}
}
}
return arrResult;
}
2. 内部机制
TextUtil.autosuggest = function(oTextbox, arrValues, sListboxId) {
var oListbox = document.getElementById(sListboxId);
ListUtil.clear(oListbox);
var arrMatches = TextUtil.autosuggestMatch(oTextbox.value, arrValues);
for(int i=0; i<arrMatchs.length; i++) {
ListUtil.add(oListbox, arrMatchs[i]);
}
};
说明：本节中描述的自动提示功能是区分大小写的。如果要进行大小写不区分的比较，需将数组中的所有值转换为小写并与转换为小写的文本框中的值进行比较。
posted on 2007-08-20 08:35
阿蜜果 阅读(2599)
评论(3) 编辑 收藏