本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
在HTML中，有两种方式表现文本框：单行文本框input和多行文本域textaa，这两个控件非常类似，大多数的情况下，它们的行为是一致的，但还是存在一些重要的区别：对于input属于HTMLInputElement类型，有type、value、size、minLength、maxLength、selectionStart、selectionEnd、selectionDiction等属性；对于textaa属于HTMLTextAaElement类型，有rows、cols、wrap、defaultValue、textLength、minLength、maxLength、selectionStart、selectionEnd、selectionDiction等属性，其初始值位于textaa之间，两者都继承自HTMLElement；；
在Javascript中，无论input还是textaa，都是通过value属性读取或设置：
varusername=document.getElementById("username");console.log(username.value);//王唯console.log(username.defaultValue);//王唯username.value="静静";console.log(username.value);//静静console.log(username.defaultValue);//王唯varcontent=document.forms["myForm"].elements["content"];console.log(content.value);console.log(content.defaultValue);
在读取或设置文本框的值时也可以使用DOM方式，如使用setAttribute()来设置控件的value属性，但不推荐使用；另外获取textaa的value值与它的子节点的值并不定是一致；
varcontent=document.forms["myForm"].elements["content"];content.value="Web前端开发";//后面子节点的内容没有被修改//content.firstChild.textContent="Web前端开发";//子节点的内容被修改了console.log(content.childNodes.length);console.log(content.childNodes[0].nodeValue);console.log(content.value);
示例：自动增高的textaa：
styletextaa.noscrollbars{overflow:hidden;width:px;height:px;}/stylescriptfunctionautoGrow(oField){if(oField.scrollHeightoField.clientHeight){oField.style.height=oField.scrollHeight+"px";}}/scriptformaction="demo"ptextaaclass="noscrollbars"onkeyup="autoGrow(this);"/textaa/ppinputtype="submit"value="提交"//p/form
示例：在文本区域中插入一些HTML标记等自定义文本，如：
style.intLink{cursor:pointer;text-decoration:underline;color:#ff;}/stylescriptfunctioninsertMetachars(sStartTag,sEndTag){varbDouble=arguments.length1,oMsgInput=document.myForm.myTextAa,nSelStart=oMsgInput.selectionStart,nSelEnd=oMsgInput.selectionEnd,sOldText=oMsgInput.value;oMsgInput.value=sOldText.substring(0,nSelStart)+(bDouble?sStartTag+sOldText.substring(nSelStart,nSelEnd)+sEndTag:sStartTag)+sOldText.substring(nSelEnd);//设置选中的文本区域，此处也可以不设置oMsgInput.setSelectionRange(bDouble
nSelStart===nSelEnd?nSelStart+sStartTag.length:nSelStart,(bDouble?nSelEnd:nSelStart)+sStartTag.length);oMsgInput.focus();}/scriptformname="myForm"p[spanclass="intLink"onclick="insertMetachars(strong,\/strong);"strongBold/strong/span
spanclass="intLink"onclick="insertMetachars(em,\/em);"emItalic/em/span
spanclass="intLink"onclick="varnewURL=prompt(输入完整的URL);if(newURL){insertMetachars(ahf=\u+newURL+\u,\/a);}else{document.myForm.myTxtAa.focus();}"URL/span
spanclass="intLink"onclick="insertMetachars(\ncode\n,\n\/code\n);"code/span
spanclass="intLink"onclick="insertMetachars(:-));"smile/span]/pptextaaname="myTextAa"rows="10"cols="50"Lom…/textaa/p/form
选择文本：select()方法用于选择文本框中的所有文本，在调用此方法时，浏览器会将焦点设置到文本框中；
vartextbox=document.forms[0].elements["textbox"];textbox.select();
在文本框获得焦点时自动选择所有文本，这是一种比较常见的做法，特别是在文本包含默认值的时候，因为这样做可以让用户不必逐个删除文本，如：
vartextbox=document.forms[0].elements[0];textbox.addEventListener("focus",function(event){event.target.select();},false);
onSelect选择事件：与select()方法相对应的，是onSelect事件；当在文本框中选择文本时，就会触发；在标准中，只有用户选择了文本，且要释放鼠标，才会触发；而在IE中，只要用户选择了一个字母，不必释放鼠标，就会触发该事件；另外，在调用select()方法时会触发select事件；
textbox.addEventListener("select",function(event){console.log(event.target);});textbox.select();
取得选择的文本：
HTML5通过一些扩展方案，以便取得选择的文本，即为文本框添加了两个属性：selectionStart和selectionEnd；这两个属性中保存的是基于0的数值，表示所选择文本的范围；selectionDiction代表的是选择的方向；如：
textbox.addEventListener("select",function(event){console.log(event.target.selectionStart);console.log(event.target.selectionEnd);console.log(event.target.selectionDiction);//forward或backward});
低版本的IE（IE8）不支持，而是提供了另一种方案，IE有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息，但无法确定用户选择的是页面中哪个部分的文本；不过，在与onSelect事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件；要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来；
functiongetSelectedText(textbox){if(typeoftextbox.selectionStart=="number")turntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);elseif(document.selection)turndocument.selection.cateRange().text;}textbox.onselect=function(){console.log(getSelectedText(textbox));}textbox.select();
选择部分文本：
HTML5也为选择文本框中的部分文本提供了解决方案，即最早由Firfox引入的setSelectionRang(start:number,end:number,diction?:"forward"
"backward"
"none")方法，该方法接受两个参数：要选择的第一个字符的索引start和要选择的最后一字符之后的字符的索引end，没有返回值；
vartextbox=document.forms[0].elements[0];textbox.value="Helloworld!";textbox.setSelectionRange(0,textbox.value.length);textbox.setSelectionRange(0,3);textbox.setSelectionRange(4,7);textbox.focus();
要看到结果，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框；
IE支持使用范围选择部分文本；首先使用cateTextRange()方法创建一个范围，并将其放在恰当的位置上；然后，使用collapse()将范围折叠到文本框的开始位置；接着，再使用moveStart()和moveEnd()这两个范围方法将范围移动到位；最后，就是使用范围的select()方法选择文本；
vartextbox=document.forms[0].elements[0];textbox.value="Helloworld!";varrange=textbox.cateTextRange();//选择所有文本range.collapse(true);range.moveStart("character",0);range.moveEnd("character",textbox.value.length);range.select();//选择前3个字符range.collapse(true);range.moveStart("character",0);range.moveEnd("character",3);range.select();//选择第4个到第6个字符range.collapse(true);range.moveStart("character",4);range.moveEnd("character",3);range.select();
跨浏览器方案：
vartextbox=document.forms[0].elements[0];textbox.value="Helloworld!";functionselectText(textbox,startIndex,stopIndex){if(textbox.setSelectionRange){textbox.setSelectionRange(startIndex,stopIndex);}elseif(textbox.cateTextRange){varrange=textbox.cateTextRange();range.collapse(true);range.moveStart("character",startIndex);range.moveEnd("character",stopIndex-startIndex);range.select();}textbox.focus();}selectText(textbox,0,textbox.value.length);//选择所有文本selectText(textbox,0,3);//选择前3个文字selectText(textbox,4,7);//选择第4个到第6个
常见事件：
input和change事件：input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件；change事件和input很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在值发生改变且元素失去焦点时发生；
keypss事件过滤输入：keypss事件一般用在文本输入中；监听keypss事件，可以用来来完成某些过滤输入的操作；甚至可以综合运用事件和DOM方法，将普通文本框包装成具有验证数据功能的控件；
屏蔽字符：可以使用keypss事件阻止这个事件的默认行为来屏蔽某些非法字符，如屏蔽所有按键：
vartextbox=document.forms[0].elements[0];textbox.addEventListener("keypss",function(event){event.pventDefault();},false);
如果只想屏蔽特定的字符，需要检测keypss事件对应的字符编码；
textbox.addEventListener("keypss",function(event){varcharCode=event.charCode;if(!/\d/.test(String.fromCharCode(charCode)))event.pventDefault();},false);
自动提交和切换焦点：
一种常见的方式就是在用户填写完当前控件时，自动提交表单或将焦点切换到下一个控件；例如：输入验证码后自动提交
p验证码：inputtype="text"id="verification"name="verification"maxlength="4"//pscriptvarverification=document.getElementById("verification");verification.addEventListener("keypss",function(event){if(event.charCode48
event.charCode57)event.pventDefault();},false);verification.addEventListener("keyup",function(event){vartarget=event.target;varvalue=target.value;varpant=target.pantNode;varlog=document.cateElement("span");if(value.length==target.maxLength){//提交并验证验证码if(value==""){log.innerText="验证码正确";pant.placeChild(log,target);console.log("开始登录...");}else{log.innerText="验证码不正确";pant.placeChild(log,target);setTimeout(function(){pant.placeChild(target,log);},);}}},false);/script
例如：美国的
formid="myForm"name="myForm"inputtype="text"name="tel1"id="tel1"maxlength="3"/inputtype="text"name="tel2"id="tel2"maxlength="3"/inputtype="text"name="tel3"id="tel3"maxlength="4"//formscript(function(){functiontabForward(event){vartarget=event.target;if(target.value.length==target.maxLength){varform=target.form;for(vari=0,len=form.elements.length;ilen;i++){if(form.elements==target){if((i+1)==len){alert("输入完成，可以提交");turn;}form.elements[i+1].focus();}}}}vartextbox1=document.getElementById("tel1");vartextbox2=document.getElementById("tel2");vartextbox3=document.getElementById("tel3");textbox1.addEventListener("keyup",tabForward);textbox2.addEventListener("keyup",tabForward);textbox3.addEventListener("keyup",tabForward);})();/script
方向键切换焦点：
tableid="myTable"name="myTable"trtdinput//tdtdinput//tdtdinput//tdtdinput//td/trtrtdinput//tdtdinput//tdtdinput//tdtdinput//td/trtrtdinput//tdtdinput//tdtdinput//tdtdinput//td/trtrtdinput//tdtdinput//tdtdinput//tdtdinput//td/tr/tablescriptvarmyTable=document.getElementById("myTable");varinputs=myTable.getElementsByTagName("input");myTable.addEventListener("keydown",function(event){varfocusElement=document.activeElement;if(!event.target.contains(focusElement))turn;for(vari=0;iinputs.length;i++){if(inputs===focusElement)bak;}switch(event.keyCode){case37:if(i0)inputs[i-1].focus();bak;case38:if(i-4=0)inputs[i-4].focus();bak;case39:if(iinputs.length-1)inputs[i+1].focus();bak;case40:if(i+4inputs.length)inputs[i+4].focus();bak;}});/script