JavaScript文本框脚本编写的注意事项
在HTML中，有两种方式来表现文本框：
一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。
使用input方式，必须添加type，设置为“text”。
- size特性，可以指定文本框内能够显示的字符数。
- value属性可以设置文本框的初始值。
- maxlength特性则是用于指定文本框内可以接受的最大字符数。
textarea的初始值则必须放在开始和结束标签之内。
- cols是文本框字符行数；
- rows是文本框字符列数；
另外，不能在HTML中给textarea指定最大字符数；
一、选择文本
上述两种文本框都支持
- select()方法，这个方法主要用于选择文本框中的所有文本。不接受任何参数。
- 与这个方法对应的select事件，在选择了文本框中的文本时事件触发。
1、select()方法
下面的代码是只要文本框获得焦点，就会选择全部的文本：
vartextBox=document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value="inputyourfirstName";
//设置事件
textBox.addEventListener("focus",function(){
event.target.select();
});
2、select事件
何时触发该事件：
- 一般情况下只有用户选择了文本（而且要释放鼠标），才会触发select事件；
- IE8及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件；
- 在调用select()方法时也会触发；
如：
vartextBox=document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value="inputyourfirstName";
//设置事件
textBox.addEventListener("select",function(){
console.log("selected");
});
3、取得选择的文本
利用两个属性：
- selectionStart
- selectionEnd
这两个属性保存的是基于0的数值，表示所选择文本的范围（偏移量）。因此要取得用户选择的文本框中的文本，可以使用如下代码：
vartextBox=document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value="inputyourfirstName";
//设置事件
textBox.addEventListener("select",function(){
varselected=textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
console.log(selected);
});
另外，也可以用该属性来设置当获得焦点的时候默认全选的状态：
textBox.addEventListener("focus",function(){
textBox.selectionStart="0";
textBox.selectionEnd=textBox.value.length;
});
或者：
textBox.addEventListener("focus",function(){
textBox.blur();
});
但是，使用selectionStart/End属性时，IE8不支持，但支持另一个名为
- document.selection对象，该对象保存着用户在整个文档范围内选择的文本信息
获取选择的文本的兼容版本为：
functiongetSelectedText(textbox){
if(typeoftextbox.selectionStart=="number"){
returntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}elseif(document.selection){
returndocument.selection.createRange().text;
}
}
二、选择部分文本
选择部分文本的方法是:
setSelectionRange()方法。接收两个参数：要选择第一个字符的索引和最后一个字符的索引。
如阻止用户选择：
textBox.addEventListener("focus",function(){
textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select",function(){
textBox.setSelectionRange(0,0);
});
要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题：
varrange=textBox.createTextRange();
range.collapse(true);//范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();
兼容版本：比较常用
functionselectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}elseif(textbox.createTextRange()){
varrange=textbox.createTextRange();
range.collapse(true);//范围折叠到开头
range.moveStart("Character",startIndex);
range.moveEnd("Character",stopIndex);
range.select();
};
}
三、过滤输入
1、屏蔽字符
下面的代码仅允许输入数字：
vartextBox=document.getElementById("myForm").elements["firstName"];
textBox.autofocus=true;
textBox.addEventListener("keypress",function(){
if(!/\d/.test(String.fromCharCode(event.charCode))){//仅输入数字
event.preventDefault();
};
});
但是部分浏览器会对向上、下键、退格键触发keypress事件，所以需要对这些常用的操作键取消禁止，只要不屏蔽那些字符编码小于10的键即可：
textBox.addEventListener("keypress",function(){
if(!/\d/.test(String.fromCharCode(event.charCode))&&event.charCode>9&&!event.ctrlKey){//仅输入数字
event.preventDefault();
};
});
四、操作剪贴板
以下是6个剪贴板事件
- beforecopy：在发生复制操作前触发
- copy：在发生复制时触发
- beforecut：在发生剪贴前操作
- cut：在发生加贴时操作
- beforepaste：在发生黏贴操作前触发
- paste：在发生黏贴操作时触发
如设置禁止拷贝：
//拷贝之前提示禁止拷贝
textBox.addEventListener("beforecopy",function(){
textBox.value="donotcopy";
});
//拷贝时禁止拷贝
textBox.addEventListener("copy",function(){
event.preventDefault();
});
要访问剪贴板中的数据，可以使用clipboardData对象，在IE中，这个对象是window对象的属性，在friefox，safari和chrome，这个对象是相应event对象的属性；在IE中可以随时访问该对象；但在其他浏览器中只有在处理剪贴板事件期间才有效。
这个clipboardData对象有三个方法：
- getData()
- setData()
- clearData()
getData()接收一个参数，即要取得数据的格式（IE中有两种数据格式：text和URL；在其他浏览器中这个参数是一种MIME类型；不过可以用text代替text/plain）。
setData()接收两个参数，即数据类型和要放在剪贴板中的文本。（第一个参数中，IE支持text和URL；第二个参数中chrome和safari不支持text类型）;这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回false：
functiongetClipboardText(event){
varclipboardData=(event.clipboardData||window.clipboardData);
returnclipboardData.getData("text");
}
functionsetClipboardText(event,value){
if(event.clipboardData){
returnevent.clipboardData.setData("text/plain",value);
}elseif(window.clipboardData){
returnwindow.clipboardData.setData("text",value);
}
}
目前浏览器逐渐收紧对访问剪贴板的操作。
五、自动切换焦点
理论上就是在前一个文本框中的字符打到最大数量后，自动将焦点切换到下一个文本框：
DOM:
<formaction=""> <inputtype="text"name="tel11"id="txtTel1"maxLength="3"> <inputtype="text"name="tel12"id="txtTel2"maxLength="3"> <inputtype="text"name="tel13"id="txtTel3"maxLength="4"> <inputtype="submit"name="btn"id="btn"value="submit"> </form>
js:
vartextbox1=document.getElementById("txtTel1");
vartextbox2=document.getElementById("txtTel2");
vartextbox3=document.getElementById("txtTel3");
textbox1.addEventListener("keyup",tabForward);
textbox2.addEventListener("keyup",tabForward);
textbox3.addEventListener("keyup",tabForward);
functiontabForward(){
vartarget=event.target;
//当value长度等于最大值的时候
if(target.value.length==target.maxLength){
varform=target.form;
//遍历所在的form表单中的元素
for(vari=0,len=form.elements.length;i<len;i++){
//如果该元素是目标元素
if(form.elements[i]==target){
//并且该元素的下一个元素为true其他条件
if((form.elements[i+1])&&(form.elements[i+1].nodeType==1)&&(form.elements[i+1].tagName.toLowerCase()=="input")&&(form.elements[i+1].type=="text")){
//则下个元素获得焦点
form.elements[i+1].focus();
}
}
};
}
}
六、HTML5约束验证API
1、必填字段required属性
在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性：
varisRequiredSupported="required"indocument.createElement("input");
2、其他输入类型
input的type属性增加了“email”和“url”；各浏览器也都为它们增加了定制的验证机制：
varinput=document.createElement("input");
input.type="email";
varisEmailSupported=(input.type=="email");
3、数值范围
除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。
对这事数值类型的输入元素可以指定min属性，max属性，step属性。同时这些数值类型元素还有两个方法：stepUp(),stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。
DOM:
<formaction=""> <inputtype="range"name="tel14"id="txtTel4"requiredmin="10"max="20"step="1"> <inputtype="button"value="up"id="up"> <inputtype="text"id="output"> <inputtype="submit"name="btn"id="btn"value="submit"> </form>
js:
varinput=document.getElementById("txtTel4");
varup=document.getElementById("up");
input.addEventListener("mousemove",function(){
varoutput=document.getElementById("output");
output.value=input.value;
});
up.addEventListener("click",function(){
//点击value值以2为单位增加
input.stepUp(2);
varoutput=document.getElementById("output");
output.value=input.value;
});
3、输入模式
HTML5新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。
<inputtype="text"id="number"pattern="\d{3}">
varnum=document.getElementById("number");
console.log(num.pattern);//\d{3}
可以使用以下代码来检测浏览器是否支持pattern属性：
varisPatternSupported="pattern"indocument.createElement("input");
4、检测有效性
使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。
<formaction="">
<inputtype="text"pattern="w"id="name"required>
<inputtype="number"max="10"id="num"required>
<inputtype="button"id="check"value="check">
<inputtype="submit"id="submit"value="submit"disabled>
</form>
varform=document.forms[0];
varname=document.getElementById("name");
varnumber=document.getElementById("num");
varcheck=document.getElementById("check");
varsubmit=document.getElementById("submit");
check.addEventListener("click",function(){
console.log(form.checkValidity());//检测整个表单是否正确
if(form.checkValidity()){
submit.removeAttribute("disabled");
check.disabled=true;
}else{
alert("请检查表单");
}
});
input的validity属性会给出什么字段有效和无效的具体信息。
varinputName=document.getElementById("inputName");
inputName.onblur=function(){
if(inputName.checkValidity()){
inputName.style.color="white";
inputName.style.backgroundColor="green";
}else{
inputName.style.color="white";
inputName.style.backgroundColor="red";
if(inputName.validity.patternMismatch){
inputName.value="请填写正确的格式";
}
}
};
inputName.addEventListener("mouseenter",function(){
inputName.focus();
inputName.select();
});
validity主要包括下列属性：
- customError：是否设置了setCustomValidity()；
- patternMismatch：是否与pattern属性匹配；
- rangeOverflow：是否比max值大；
- rangeUnderflow：是否比min值小；
- stepMisMatch：步长是否合理；
- tooLong：是否超过了maxlength；
- typeMismatch：是否不是mail类型和url类型；
- valid：如果这里的其他属性都是false，返回true；
- valueMissing：如果为required中没有值，返回true。
5、禁用验证
通过设置表单的novalidate属性，可以是表单不进行验证。用js获取form之后，设置它的novalidate属性为true，会禁用表单验证。
在提交按钮上添加formnovalidate属性，会不验证提交表单。用js获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。
以上就是本文的全部内容，希望对大家的学习有所帮助。