JavaScript：文本框脚本
2016-06-05 16:58
447 查看
在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。要表现文本框必须将<input>元素的type特性设置为"text"。而通过设置size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。
<input type="text" size="25" maxlength="50" value="initial value">读取和设置文本框的值：
var textbox=document.forms[0].elements["textbox"];
alert(textbox.value);
textbox.value="Some new value"
1、选择文本
select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（除opera外）都会将焦点设置到文本框中。
上面的代码应用到本框之后，只要文本框获得焦点，就会选择其中所有的文本，这种技术能够较大幅度地提升表单的易用性。
（1）、选择（select）事件
（2）、取得选择的文本
HTML5通过扩展方案解决了用户选择了什么文本的问题，该规范采取的办法是添加两个属性：selectionStart和selectionEnd。IE9+,Firefox、Safari、Chrome和Opera都支持这两个属性，但是IE8及之前版本都不支持这两个属性，而是提供了另一种方案。IE8及之前版本中有一个document.selection对象，其中保存着用户整个文档范围内选择的文本信息。
（3）、选择部分文本
setSelectionRange()方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符索引（类似于substring()方法）。必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。
2、过滤输入
（1）、屏蔽字符
运行以上代码，由于所有按键操作都将屏蔽，结果会导致文本框变成只读的。如果只想屏蔽特定字符，则需要检测keypress事件对应的字符编码，然后再决定如何响应。
使用String.fromCharCode()将字符编码转换成字符串。
（2）、操作剪贴板
有6个剪贴板事件：
beforecopy：在发生复制操作前触发
copy：在发生复制操作是触发
beforecut：在发生剪切操作前触发
cut：在发生剪切操作是触发
beforepaste：在发生粘贴操作前触发
paste：在发生粘贴操作是触发
（3）、自动切换焦点
（4）、HTML5约束验证API
a、必填字段：required
b、其他输入类型
c、数值范围：number、range、datetime、datetime-local、date、month、week和time。
d、输入模式：HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
e、检测有效性：使用checkValidity()方法可以检测表单中的某个字段是否有效。
f、禁用验证：通过设置novalidate属性，可以告诉表单不进行验证。
如果一个表单有多个提交按钮，为了指定点击某个提交按钮不必验证表单。
<input type="text" size="25" maxlength="50" value="initial value">读取和设置文本框的值：
var textbox=document.forms[0].elements["textbox"];
alert(textbox.value);
textbox.value="Some new value"
1、选择文本
select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（除opera外）都会将焦点设置到文本框中。
<!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）事件
<!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="js/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,"select",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.value);//显示所有的文本
});
</script>
</body>
</html>（2）、取得选择的文本
HTML5通过扩展方案解决了用户选择了什么文本的问题，该规范采取的办法是添加两个属性：selectionStart和selectionEnd。IE9+,Firefox、Safari、Chrome和Opera都支持这两个属性，但是IE8及之前版本都不支持这两个属性，而是提供了另一种方案。IE8及之前版本中有一个document.selection对象，其中保存着用户整个文档范围内选择的文本信息。
<!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="js/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,"select",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(typeof target.selectionStart=="number"){//IE9+,Firefox、Safari、Chrome和Opera
alert(target.value.substring(target.selectionStart,target.selectionEnd));
}else if(document.selection){//IE8及更早的版本
alert(document.selection.createRange().text);
}
});
</script>
</body>
</html>（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="js/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);
});运行以上代码，由于所有按键操作都将屏蔽，结果会导致文本框变成只读的。如果只想屏蔽特定字符，则需要检测keypress事件对应的字符编码，然后再决定如何响应。
//只允许用户输入数字
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);//屏蔽按键事件
}
});使用String.fromCharCode()将字符编码转换成字符串。
（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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript：表单基础知识
- jsp标签
- AngulaJs显示隐藏
- flexigrid colModel 二维json
- AngulaJs点击
- js扩展方法
- Javascript内置对象和面向对象的实现----对象和数组的概念
- AngulaJs删除
- jstl中<c:forEach>的用法
- java web3 jsp编程基础
- javascript----运算符
- 动态内存分配导致Javascript性能的问题
- 动态内存分配导致Javascript性能的问题
- jsp地址栏传参，中文乱码
- EL表达式
- js—连缀
- js注册页面的实现
- AngulaJs 会动的时间
- JSP第二篇
- Js中escape(),encodeURI()和encodeURIComponent()使用和比较[转载]