本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
在HTML中，有两种方式表现文本框：单行文本框<input>和多行文本域<textarea>，这两个控件非常类似，大多数的情况下，它们的行为是一致的，但还是存在一些重要的区别：对于<input>属于HTMLInputElement类型，有type、value、size、minLength、maxLength、selectionStart、selectionEnd、selectionDirection等属性；对于textarea属于HTMLTextAreaElement类型，有rows、cols、wrap、defaultValue、textLength、minLength、maxLength、selectionStart、selectionEnd、selectionDirection等属性，其初始值位于<textarea>之间，两者都继承自HTMLElement；；
在Javascript中，无论<input>还是<textarea>，都是通过value属性读取或设置：
var username = document.getElementById("username");
console.log(username.value); // 王唯
console.log(username.defaultValue); // 王唯
username.value = "静静";
console.log(username.value); // 静静
console.log(username.defaultValue); // 王唯
var content = document.forms["myForm"].elements["content"];
console.log(content.value);
console.log(content.defaultValue);
在读取或设置文本框的值时也可以使用DOM方式，如使用setAttribute()来设置控件的value属性，但不推荐使用；另外获取textarea的value值与它的子节点的值并不定是一致 ；
var content = 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);
示例：自动增高的textarea：
<style>
textarea.noscrollbars{
overflow: hidden; width: 300px; height:100px;
}
</style>
<script>
function autoGrow(oFIEld){
if(oField.scrollHeight > oField.clientHeight){
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<form action="demo">
<p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
<p><input type="submit" value="提交" /></p>
</form>
示例：在文本区域中插入一些HTML标记等自定义文本，如：
<style>
.intLink {
cursor: pointer; text-decoration: underline; color: #0000ff;
}
</style>
<script>
function insertMetachars(sStartTag, sEndTag) {
var bDouble = arguments.length > 1,
oMsginput = document.myForm.myTextArea,
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();
}
</script>
<form name="myForm">
<p>[ <span class="intLink" onclick="insertMetachars('<strong>','</strong>');"><strong>Bold</strong></span> | <span class="intLink" onclick="insertMetachars('<em>','</em>');"><em>Italic</em></span> | <span class="intLink" onclick="var newURL=prompt('输入完整的URL');if(newURL){insertMetachars('<a href=u0022'+newURL+'u0022>','</a>');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('n<code>n','n</code>n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> ]</p>
<p><textarea name="myTextArea" rows="10" cols="50">Lorem … </textarea></p>
</form>
选择文本：
select()方法用于选择文本框中的所有文本，在调用此方法时，浏览器会将焦点设置到文本框中；
var textbox = document.for
ms[0].elements["textbox"];
textbox.select();
在文本框获得焦点时自动选择所有文本，这是一种比较常见的做法，特别是在文本包含默认值的时候，因为这样做可以让用户不必逐个删除文本，如：
var textbox = 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的数值，表示所选择文本的范围；selectionDirection代表的是选择的方向；如：
textbox.addEventListener("select", function(event){
console.log(event.target.selectionStart);
console.log(event.target.selectionEnd);
console.log(event.target.selectionDirection); // 'forward'或'backward'
});
低版本的IE（IE8）不支持，而是提供了另一种方案，IE有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息，但无法确定用户选择的是页面中哪个部分的文本；不过，在与onSelect事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件；要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来；
function getSelectedText(textbox){
if(typeof textbox.selectionStart == "number")
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
else if(document.selection)
return document.selection.createRange().text;
}
textbox.onselect = function(){
console.log(getSelectedText(textbox));
}
textbox.select();
选择部分文本：
HTML5也为选择文本框中的部分文本提供了解决方案，即最早由Firfox引入的setSelectionRang(start: number, end: number, direction?: "forward" | "backward" | "none")方法，该方法接受两个参数：要选择的第一个字符的索引start和要选择的最后一字符之后的字符的索引end，没有返回值；
var textbox = document.forms[0].elements[0];
textbox.value = "Hello world!";
textbox.setSelectionRange(0, textbox.value.length);
textbox.setSelectionRange(0, 3);
textbox.setSelectionRange(4, 7);
textbox.focus();
要看到结果，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框；
IE支持使用范围选择部分文本；首先使用createTextRange()方法创建一个范围，并将其放在恰当的位置上；然后，使用collapse()将范围折叠到文本框的开始位置；接着，再使用moveStart()和moveEnd()这两个范围方法将范围移动到位；最后，就是使用范围的select()方法选择文本；
var textbox = document.forms[0].elements[0];
textbox.value = "Hello world!";
var range = textbox.createTextRange();
// 选择所有文本
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();
跨浏览器方案：
var textbox = document.forms[0].elements[0];
textbox.value = "Hello world!";
function selectText(textbox, startIndex, stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex, stopIndex);
}else if(textbox.createTextRange){
var range = textbox.createTextRange();
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在值发生改变且元素失去焦点时发生；
keypress事件过滤输入：
keypress事件一般用在文本输入中；监听keypress事件，可以用来来完成某些过滤输入的操作；甚至可以综合运用事件和DOM方法，将普通文本框包装成具有验证数据功能的控件；
屏蔽字符：可以使用keypress事件阻止这个事件的默认行为来屏蔽某些非法字符，如屏蔽所有按键：
var textbox = document.forms[0].elements[0];
textbox.addEventListener("keypress", function(event){
event.preventDefault();
},false);
如果只想屏蔽特定的字符，需要检测keypress事件对应的字符编码；
textbox.addEventListener("keypress", function(event){
var charCode = event.charCode;
if(!/d/.test(String.fromCharCode(charCode)))
event.preventDefault();
},false);
自动提交和切换焦点：
一种常见的方式就是在用户填写完当前控件时，自动提交表单或将焦点切换到下一个控件；
例如：输入验证码后自动提交
<p>验证码：<input type="text" id="verification" name="verification" maxlength="4" /></p>
<script>
var verification = document.getElementById("verification");
verification.addEventListener("keypress", function(event){
if(event.charCode < 48 || event.charCode > 57)
event.preventDefault();
},false);
verification.addEventListener("keyup", function(event){
var target = event.target;
var value = target.value;
var parent = target.parentNode;
var log = document.createElement("span");
if(value.length == target.maxLength){
// 提交并验证验证码
if(value == "1234"){
log.innerText = "验证码正确";
parent.replaceChild(log, target);
console.log("开始登录...");
}else{
log.innerText = "验证码不正确";
parent.replaceChild(log, target);
setTimeout(function(){
parent.replaceChild(target, log);
},2000);
}
}
},false);
</script>
例如：美国的电话号码：
<form id="myForm" name="myForm">
<input type="text" name="tel1" id="tel1" maxlength="3" />
<input type="text" name="tel2" id="tel2" maxlength="3" />
<input type="text" name="tel3" id="tel3" maxlength="4" />
</form>
<script>
(function(){
function tabForward(event){
var target = event.target;
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((i+1) == len){
alert("输入完成，可以提交");
return;
}
form.elements[i+1].focus();
}
}
}
}
var textbox1 = document.getElementById("tel1");
var textbox2 = document.getElementById("tel2");
var textbox3 = document.getElementById("tel3");
textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);
})();
</script>
方向键切换焦点：
<table id="myTable" name="myTable">
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
</table>
<script>
var myTable = document.getElementById("myTable");
var inputs = myTable.getElementsByTagName("input");
myTable.addEventListener("keydown", function(event){
var focusElement = document.activeElement;
if(!event.target.contains(focusElement))
return;
for(var i=0; i<inputs.length; i++){
if(inputs[i] === focusElement)
break;
}
switch(event.keyCode){
case 37:
if(i > 0) inputs[i-1].focus();
break;
case 38:
if(i - 4 >= 0) inputs[i-4].focus();
break;
case 39:
if(i < inputs.length - 1) inputs[i + 1].focus();
break;
case 40:
if(i + 4 < inputs.length) inputs[i + 4].focus();
break;
}
});
</script>
最新评论