表现文本框的两种方式:单行文本框<input>
、多行文本框<textarea>
<input type="text" size="显示的字符数" value="文本框的初始值" maxlength="可以接收的最大字符数">
<textarea rows="文本框的字符行数" cols="文本框的字符列数">文本框的初始值</textarea>
两者都是把用户输入的内容保存在value属性中。可以通过 “文本框.value ” 来读取或设置文本框的值
【选择文本】
1.获取文本框中的所有文本: 文本框.select()
使用select方法时,大多数浏览器(opera除外)会将焦点设置到文本框中。同时使用该方法会触发select事件。
//在文本框获得焦点时,选择文本框中的所有文本
EventUnit.addHandler(文本框,"focus",function(event){
event = EventUnit.getEvent(event);
var target = EventUnit.getTarget(event);
target.select();
});
2.获取用户选择的那一部分文本:
1. 使用selectionStart和selectionEnd属性
2. IE8及之前版本:使用document.selection对象(selection对象保存着用户在整个文档范围内选择的文本信息)
function getSelectedText(textbox){
if(typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
//IE8及更早版本
else if(document.selection){
return document.selection.createRange().text;
}
}
3.选择部分文本 :
1. 文本框.setSelectionRange(起始字符索引,结束字符索引+1)
2. IE8及更早版本:
(1)在文本框上创建一个范围
(2)将范围折叠到文本框开始位置
(3)使用moveStrat()和moveEnd()方法
#倘若想看到选择的文本,就要在调用setSelectionRange方法之前或之后立即把焦点设置到文本框。
//选择部分文本
function setSelectedText(textbox, startIndex, endIndex){
if(textbox.setSelectionRange){
return textbox.setSelectionRange(startIndex,endIndex+1);
}
else if(textbox.createTextRange){
var range =textbox.createTextRange();
range.collapse(true); //将范围折叠到文本框开始位置
range.moveStart("character",startIndex); //第一个参数是移动单位,第二个参数是开始位置
range.moveEnd("character",endIndex+1-startIndex);//第一个参数是移动单位,第二个参数是传入的字符总数
range.select();
}
}
【过滤输入】
1.屏蔽字符
//只允许用户输入数值
EventUnit.addHandler(表单.elements[0],"keypress",function(event){
event = EventUnit.getEvent(event);
var target = EventUnit.getTarget(event);
//取得字符编码
var charCode = EventUnit.getCharCode(event);
//将字符编码换成字符串
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
EventUnit.preventDefault(event);
}
});
2.操作剪贴板
1. beforecopy 在复制前触发
2. copy 在复制时触发
3. beforecut 在剪切前触发
4. cut 在剪切时触发
5. beforepaste 在粘贴前触发
6. paste 在粘贴时触发
要访问剪贴板中的数据,在IE中使用 window.clipboardData;
在其他浏览器使用 event.clipboardData
【自动切换焦点】
常见应用场景:在用户填写完当前字段后,自动把焦点切换到下一个字段。
//自动切换焦点,通常指定keyup事件,因为keyup事件会在用户输入新字符后触发,所以此时是检测文本框内容长度的最佳时机。
//HTML代码:
<input type="text" name="tel1" id="texTell1" maxlength="3">
<input type="text" name="tel2" id="texTell2" maxlength="3">
<input type="text" name="tel3" id="texTell3" maxlength="4">
//Js代码:
function tabForward(event){
event = EventUnit.getEvent(event);
var target = EventUnit.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("texTell1");
var text2 = document.getElementById("texTell2");
var text3 = document.getElementById("texTell3");
EventUnit.addHandler(text1,"keyup",tabForward);
EventUnit.addHandler(text2,"keyup",tabForward);
EventUnit.addHandler(text3,"keyup",tabForward);
效果如图所示:
当第一个框输完3个数字后,焦点自动切换到第二个框,当第二个框输完3个数字后,焦点自动切换到第三个框。
【HTML5约束验证API】
在将表单提交到服务器前验证数据:
1.在表单字段中指定了required属性,在提交表单时不能为空
<input type="text" name="username" required>
(如果指定requires属性的字段没有填写,FireFox4和Opera会阻止表单提交,Chrome和Safari不阻止表单提交)
2.为input的type类型增加了“email”和“url”
3.为input新增了pattern属性,值为一个正则表达式,用于匹配文本框中的值
4.(1)检测 “表单中的某个字段”/“整个表单” 是否有效:
字段.checkValidity() / 表单.checkValidity()
(2)检测 “表单中的某个字段” 有效或无效的原因:
字段.validity
//检测表单中某个字段有效或无效的原因
if(x.validity && !x.validity.valid){
if(x.validity.valueMissing){
alert("没有在标注为required的字段中填写值!");
}
else if(x.validity.typeMismatch){
alert("没有按照mail或url要求的格式填写值!");
}
else if(x.validity.rangeOverflow){
alert("输入的值超过max");
}
else if(x.validity.rangeUnderflow){
alert("输入的值少于min");
}
else if(x.validity.patternMismatch){
alert("输入的值与指定的pattern属性不匹配");
}
else if(x.validity.tooLong){
alert("输入的值超过maxlength指定的长度");
}
}
5.禁用表单验证 : 在form标签上添加 novalidate属性
点击提交按钮不必验证表单: 在提交按钮上添加formnovalidate属性