JavaScript笔记表单脚本.docx
《JavaScript笔记表单脚本.docx》由会员分享，可在线阅读，更多相关《JavaScript笔记表单脚本.docx（26页珍藏版）》请在冰豆网上搜索。
JavaScript笔记表单脚本
JavaScript笔记：
表单脚本
JavaScript笔记：
错误处理与调试JavaScript最初的应用之一，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。
1、表单的基础知识
在javascript中，表单是用HTMLFormElement类型来表示的。
HTMLFormElement继承了HTMLElement，因而与其他HTML元素有相同的默认属性，不过HTMLFormElement也有它自己独有的属性和方法：
acceptCharset：
服务器能够处理的字符集
action：
接受请求的URL
elements：
表单中所有控件的集合
enctype：
请求的编码类型
length：
表单中控件的数量
method：
要发送的http请求类型
name：
表单的名称
reset（）：
将所有表单域重置为默认值
submit（）：
提交表单
target：
用于发送请求和接受相应的窗口名称
获得表单：
//方法1
varform=document.getElementById（"form1"）;
//方法2
varfirstForm=document.forms[0];
varmyForm=document.forms["form2"];//获得页面中名字是form2的表单
提交表单
--通用提交按钮-->
--自定义提交按钮-->
SubmitForm
--图像按钮-->
只要表单中存在上面任何一个按钮，那么在相应表单获得焦点的前提下，点击回车就可以提交表单。
以这种方式提交表单时，浏览器会在请求发送给服务器之前，触发submit事件。
这样，我们就有机会验证表单数据，并且决定是否允许表单提交。
组织这个事件的默认行为就可以阻止表单的提交：
varform=document.getElementById（"myForm"）;
EventUtil.addHandler（form,"submit",function（event）{
event=EventUtil.getEvent（event）;
EventUtil.preventDefault（event）;
}）;
在javascript中，调用函数submit就可以提交表单，这种方式无需使表单包含提交按钮。
varform=document.getElementById（"myForm"）;
//提交表单
form.submit（）;
注意，在使用submit函数提交表单的时候，不会触发submit事件，因此需要先做验证。
提交表单时可能出现的最大问题,就是重复提交表单。
在第一次提交表单后,如果长时间没有反应,用户可能会变得不耐烦。
这时候,他们也许会反复单击提交按钮。
结果往往很麻烦（因为服务器要处理重复的请求）,或者会造成错误（如果用户是下订单,那么可能会多订好几份）。
解决这一问题的办法有两个:
在第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作。
重置表单
在用户单击重置按钮时,表单会被重置。
使用type特性值为”reset”的input或button都可以创建重置按钮,如下面的例子所示。
--通用重置按钮-->
--自定义重置按钮-->
ResetForm
这两个按钮都可以用来重置表单。
在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值。
如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复为默认值。
用户单击重置按钮重置表单时,会触发reset事件。
利用这个机会,我们可以在必要时取消重置操作。
例如,下面展示了阻止重置表单的代码。
varform=document.getElementById（"myForm"）;
EventUtil.addHandler（form,"reset",function（event）{
//取得事件对象
event=EventUtil.getEvent（event）;
//阻止表单重置
EventUtil.preventDefault（event）;
}）;
与提交表单一样,也可以通过JavaScript来重置表单,如下面的例子所示。
varform=document.getElementById（"myForm"）;
//重置表单
form.reset（）;
与调用submit（）方法不同,调用reset（）方法会像单击重置按钮一样触发reset事件。
表单字段
可以像访问页面中的其他元素一样,使用原生DOM方法访问表单元素。
此外,每个表单都有elements属性,该属性是表单中所有表单元素（字段）的集合。
这个elements集合是一个有序列表,其中包含着表单中的所有字段,例如input、textarea、button和fieldset。
每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name特性来访问它们。
下面来看一个例子：
varform=document.getElementById（"form1"）;
//取得表单中的第一个字段
varfield1=form.elements[0];
//取得名为"textbox1"的字段
varfield2=form.elements["textbox1"];
//取得表单中包含的字段的数量
varfieldCount=form.elements.length;
如果有多个表单控件都在使用一个name（如单选按钮）,那么就会返回以该name命名的一个NodeList。
例如,以下面的HTML代码片段为例：
在这个HTML表单中,有3个单选按钮,它们的name都是”color”,意味着这3个字段是一起的。
在访问elements[“color”]时,就会返回一个NodeList,其中包含这3个元素;不过,如果访问elements[0],则只会返回第一个元素。
共有的表单字段属性
disabled:
布尔值,表示当前字段是否被禁用。
form:
指向当前字段所属表单的指针;只读。
name:
当前字段的名称。
readOnly:
布尔值,表示当前字段是否只读。
tabIndex:
表示当前字段的切换（tab）序号。
type:
当前字段的类型,如"checkbox"、"radio",等等。
value:
当前字段将被提交给服务器的值。
对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。
除了form属性之外,可以通过JavaScript动态修改其他任何属性：
varform=document.getElementById（"myForm"）;
varfield=form.elements[0];
//修改value属性
field.value="Anothervalue";
//检查form属性的值
alert（field.form===form）;//true
//把焦点设置到当前字段
field.focus（）;
//禁用当前字段
field.disabled=true;
//修改type属性（不推荐,但对来说是可行的）field.type="checkbox";
避免多次提交表单的方法：
//避免多次提交表单
EventUtil.addHandler（form,"submit",function（event）{
event=EventUtil.getEvent（event）;
vartarget=EventUtil.getTarget（event）;
//取得提交按钮
varbtn=target.elements["submit-btn"];
//禁用它
btn.disabled=true;
}）;
共有的表单字段方法
每个表单字段都有两个方法:
focus（）和blur（）。
其中，focus（）方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
例如，接收到焦点的文本框会显示插入符号，随时可以接收输入。
使用focus（）方法，可以将用户的注意力吸引到页面中的某个部位。
例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。
为此，可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus（）方法：
EventUtil.addHandler（window,"load",function（event）{
document.forms[0].elements[0].focus（）;
}）;
要注意的是：
如果第一个表单字段是一个input元素，且其type特性的值为”hidden”，那么，以上代码会导致错误。
另外，如果使用CSS的display和visibility属性隐藏了该字段，同样也会导致错误。
HTML5为表单字段新增了一个autofocus属性。
在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。
例如:
1
很棒！
为了保证前面的代码在设置autofocus的浏览器中正常运行，必须先检测是否设置了该属性，如果设置了，就不用再调用focus（）了：
EventUtil.addHandler（window,"load",function（event）{
varelement=document.forms[0].elements[0];
if（element.autofocus!
==true）{
element.focus（）;console.log（"JSfocus"）;
}
}）;
支持autofocus属性的浏览器有Firefox4+、Safari5+、Chrome和Opera9.6。
与focus（）方法相对的是blur（）方法，它的作用是从元素中移走焦点。
在调用blur（）方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上面移走而已。
在早期Web开发中，那时候的表单字段还没有readonly特性，因此就可以使用blur（）方法来创建只读字段。
现在，虽然需要使用blur（）的场合不多了，但必要时还可以使用的。
document.forms[0].elements[0].blur（）;
1
共有的表单字段事件
blur：
当前字段失去焦点时触发。
change：
对于input和textarea元素,在它们失去焦点且value值改变时触发；对于
select元素,在其选项改变时触发。
focus：
当前字段获得焦点时触发。
通常，可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能（例如，为文本框显示一个下拉选项菜单）。
而change事件则经常用于验证用户在字段中输入的数据。
例如，假设有一个文本框，我们只允许用户输入数值。
此时，可以利用focus事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。
可以利用blur事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。
下面就给出了实现上述功能的代码：
vartextbox=document.forms[0].elements[0];
EventUtil.addHandler（textbox,"focus",function（event）{
event=EventUtil.getEvent（event）;
vartarget=EventUtil.getTarget（event）;
if（target.style.backgroundColor!
="red"）{
target.style.backgroundColor="yellow";
}}）;
EventUtil.addHandler（textbox,"blur",function（event）{
event=EventUtil.getEvent（event）;
vartarget=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）;
vartarget=EventUtil.getTarget（event）;
if（/[^\d]/.test（target.value））{
target.style.backgroundColor="red";
}else{
target.style.backgroundColor
}
}）;
附上EventUtil部分代码：
varEventUtil={
addHandler:
function（element,type,handler）{
//省略的代码
},
getEvent:
function（event）{
returnevent?
event:
window.event;
},
getTarget:
function（event）{
returnevent.target||event.srcElement;
},
preventDefault:
function（event）{
if（event.preventDefault）{
event.preventDefault（）;
}else{
event.returnValue=false;
}
},
removeHandler:
function（element,type,handler）{
//省略的代码
},
stopPropagation:
function（event）{
if（event.stopPropagation）{
event.stopPropagation（）;
}else{
event.cancelBubble=true;
}
}
};
2、文本框脚本
在HTML中,有两种方式来表现文本框：
一种是使用input元素的单行文本框，另一种是使用textarea的多行文本框。
这两个控件非常相似，而且多数时候的行为也差不多。
不过，它们之间仍然存在一些重要的区别。
要表现文本框，必须将input元素的type特性设置为”text”。
而通过设置size特性，可以指定文本框中能够显示的字符数。
通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。
如果要创建一个文本框，让它能够显示25个字符，但输入不能超过50个字符,可以使用以下代码：
1
相对而言，textarea元素则始终会呈现为一个多行文本框。
要指定文本框的大小，可以使用rows和cols特性。
与input元素不同，textarea的初始值必须要放在
textarea和/textarea之间，如下面的例子所示：
initialvalue
1
另一个与input的区别在于，不能在HTML中给textarea指定最大字符数。
无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在value属性中。
可以通过这个属性读取和设置文本框的值。
我们建议读者像上面这样使用value属性读取或设置文本框的值，不建议使用标准的DOM方法。
换句话说，不要使用setAttribute（）设置input元素的value特性，也不要去修改textarea元素的第一个子节点。
原因很简单:
对value属性所作的修改，不一定会反映在DOM中。
因此，在处理文本框的值时，最好不要使用DOM方法。
选择文本
上述两种文本框都支持select（）方法，这个方法用于选择文本框中的所有文本。
在调用select（）方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。
这个方法不接受参数，可以在任何时候被调用。
vartextbox=document.forms[0].elements["textbox1"];
textbox.select（）;
在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。
因为这样做可以让用户不必一个一个地删除文本。
这种技术能够较大幅度地提升表单的易用性。
选择select事件
与select（）方法对应的，是一个select事件。
在选择了文本框中的文本时，就会触发select事件。
不过，到底什么时候触发select事件，还会因浏览器而异。
虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。
HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。
该规范采取的办法是添加两个属性:
selectionStart和selectionEnd。
这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。
因此，要取得用户在文本框中选择的文本，可以使用如下代码：
functiongetSelectedText（textbox）{
returntextbox.value.substring（textbox.selectionStart,textbox.selectionEnd）;
}
IE9+、Firefox、Safari、Chrome和Opera都支持这两个属性。
选择部分文本
HTML5也为选择文本框中的部分文本提供了解决方案，除select（）方法之外，所有文本框都有一个setSelectionRange（）方法。
这个方法接收两个参数：
要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引：
textbox.value="Helloworld!
"
//选择所有文本
textbox.setSelectionRange（0,textbox.value.length）;//"Helloworld!
"
//选择前3个字符
textbox.setSelectionRange（0,3）;//"Hel"
//选择第4到第6个字符
textbox.setSelectionRange（4,7）;//"ow"
要看到选择的文本，必须在调用setSelectionRange（）之前或之后立即将焦点设置到文本框。
IE8方案：
textbox.value="Helloworld!
";
varrange=textbox.createTextRange（）;
//选择所有文本
range.collapse（true）;
range.moveStart（"character",0）;
range.moveEnd（"character",textbox.value.length）;//"Helloworld!
"
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（）;//"ow"
选择部分文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。
过滤输入
我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。
例如，必须包含某些字符，或者必须匹配某种模式。
由于文本框在默认情况下没有提供多少验证数据的手段，因此必须使用JavaScript来完成此类过滤输入的操作。
而综合运用事件和DOM手段，就可以将普通的文本框转换成能够理解用户输入数据的功能型控件。
1、屏蔽字符
有时候，我们需要用户输入的文本中包含或不包含某些字符。
例如，电话号码中不能包含非数值字符。
如前所述，响应向文本框中插入字符操作的是keypress事件。
因此，可以通过阻止这个事件的默认行为来屏蔽此类字符。
在极端的情况下，可以通过下列代码屏蔽所有按键操作：
EventUtil.addHandler（textbox,"keypress",function（event）{
event=EventUtil.getEvent（event）;
EventUtil.preventDefault（event）;
}）;
运行以上代码后，由于所有按键操作都将被屏蔽，结果会导致文本框变成只读的。
如果只想屏蔽特定的字符，则需要检测keypress事件对应的字符编码，然后再决定如何响应。
例如，下列代码只允许用户输入数值：
EventUtil.addHandler（textbox,"keypress",function（event）{
event=EventUtil.get
升级会员 