JavaScript：表单脚本之文本框脚本
1、选择文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<input type="text" name="text" id="text" value="asdasdasdasdqwesda"/>
<input type="submit" value="提交" />
</form>
<script>
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
EventUtil.addHandler(textbox,"focus",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.select();
});
</script>
</body>
</html>
上面的代码应用到本框之后，只要文本框获得焦点，就会选择其中所有的文本，这种技术能够较大幅度地提升表单的易用性。
（1）、选择（select）事件
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
EventUtil.addHandler(textbox,"select",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.value);//显示所有的文本
});
（2）、取得选择的文本
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
EventUtil.addHandler(textbox,"select",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(typeof target.selectionStart=="number"){
alert(target.value.substring(target.selectionStart,target.selectionEnd));
}else if(document.selection){//IE8及更早的版本
alert(document.selection.createRange().text);
}
});
（3）、选择部分文本
setSelectionRange()方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符索引（类似于substring()方法）。必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<input type="text" name="text" id="text" value="asdasdasdasdqwesda"/>
<input type="submit" value="提交" />
</form>
<script>
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){//IE8及更早的版本
var range=textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
textbox.focus();
}
selectText(textbox,0,5);
</script>
</body>
</html>
2、过滤输入
（1）、屏蔽字符
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
//屏蔽所有按键操作
EventUtil.addHandler(textbox,"keypress",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
<img src="http://img.blog.csdn.net/20160605170115706?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
//只允许用户输入数字
EventUtil.addHandler(textbox,"keypress",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var charCode=EventUtil.getCharCode(event);
var chart=String.fromCharCode(charCode);//将字符编码转换成字符串
if(!/\d/.test(chart)&&charCode>9&&!event.ctrlkey){
EventUtil.preventDefault(event);
}
});
（2）、操作剪贴板
有6个剪贴板事件：
beforecopy：在发生复制操作前触发
copy：在发生复制操作是触发
beforecut：在发生剪切操作前触发
cut：在发生剪切操作是触发
beforepaste：在发生粘贴操作前触发
paste：在发生粘贴操作是触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<input type="text" name="text" id="text" value=""/>
<input type="submit" value="提交" />
</form>
<script>
var form=document.getElementById("form");
var textbox=form.elements[0];//取得表单中的第一个字段
//确保剪贴板中的值为数值
EventUtil.addHandler(textbox,"paste",function(event){
event=EventUtil.getEvent(event);
var text=EventUtil.getClipboardText(event);
if(!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
});
</script>
</body>
</html>
（3）、自动切换焦点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<input type="text" name="text1" id="text1" maxlength="3"/>
<input type="text" name="text2" id="text2" maxlength="4"/>
<input type="text" name="text3" id="text3" maxlength="4"/>
<input type="submit" value="提交" />
</form>
<script>
//自动切换焦点
(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 text1=document.getElementById("text1");
var text2=document.getElementById("text2");
var text3=document.getElementById("text3");
EventUtil.addHandler(text1,"keyup",tabForward);
EventUtil.addHandler(text2,"keyup",tabForward);
EventUtil.addHandler(text3,"keyup",tabForward);
})();
</script>
</body>
</html>
（4）、HTML5约束验证API
a、必填字段：required
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<input type="text" name="username" id="username" required="required"/>
<input type="submit" value="提交" />
</form>
<script>
var isUsernameRequired=document.forms[0].elements["username"].required;
alert(isUsernameRequired);//true
var isRequiredSupported="required" in document.createElement("input");
alert(isRequiredSupported);//true
</script>
</body>
</html>
b、其他输入类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="EventUtil.js"></script> <title>表单脚本</title> </head> <body> <form action="#" method="post" id="form" name="form"> <input type="email" name="email"/> <input type="url" name="url"/> <input type="submit" value="提交" /> </form> </body> </html>
c、数值范围：number、range、datetime、datetime-local、date、month、week和time。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="EventUtil.js"></script> <title>表单脚本</title> </head> <body> <form action="#" method="post" id="form" name="form"> <!--对于数值类型的输入袁术，可以指定min属性、max属性和step属性，例如：只能输入0-100的值，而且这个值必须是5的倍数--> <input type="number" name="number" min="0" max="100" step="5" /> <input type="submit" value="提交" /> </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="EventUtil.js"></script> <title>表单脚本</title> </head> <body> <form action="#" method="post" id="form" name="form"> <!--对于数值类型的输入袁术，可以指定min属性、max属性和step属性，例如：只能输入0-100的值，而且这个值必须是5的倍数--> <input type="number" name="number" min="0" max="100" value="20"/> <input type="time" name="time"/> <input type="submit" value="提交" /> </form> <script> var input=document.forms[0].elements[0]; input.stepUp();//加1 input.stepUp(15);//加5 input.stepDown();//减1 input.stepDown(5);//减5 </script> </body> </html>
d、输入模式：HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="EventUtil.js"></script>
<title>表单脚本</title>
</head>
<body>
<form action="#" method="post" id="form" name="form">
<!--如果只想允许在文本字段中输入数值-->
<input type="text" name="text" pattern="\d+"/>
<input type="submit" value="提交" />
</form>
<script>
var isUsernameRequired=document.forms[0].elements["text"].pattern;
alert(isUsernameRequired);//\d+
var isRequiredSupported="pattern" in document.createElement("input");
alert(isRequiredSupported);//true
</script>
</body>
</html>
e、检测有效性：使用checkValidity()方法可以检测表单中的某个字段是否有效。
f、禁用验证：通过设置novalidate属性，可以告诉表单不进行验证。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="EventUtil.js"></script> <title>表单脚本</title> </head> <body> <form action="#" method="post" id="form" name="form" novalidate="novalidate"> <!--如果只想允许在文本字段中输入数值--> <input type="text" name="text" pattern="\d+"/> <input type="submit" value="提交" /> </form> <script> //document.forms[0].noValidate=true;//禁用验证 </script> </body> </html>
如果一个表单有多个提交按钮，为了指定点击某个提交按钮不必验证表单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="EventUtil.js"></script> <title>表单脚本</title> </head> <body> <form action="#" method="post" id="form" name="form"> <!--如果只想允许在文本字段中输入数值--> <input type="text" name="text" pattern="\d+"/> <input type="submit" value="提交1" /> <!--提交2禁用验证--> <input type="submit" name="btnNovalidate" formnovalidate value="提交2" /> </form> <script> //document.forms[0].elements["btnNovalidate"].formNoValidate=true;//提交2禁用验证 </script> </body> </html>