第64节 表单控件文本框及文本域-Web前端开发之JavaScript[通俗易懂]

欢迎大家来到IT世界,在知识的湖畔探索吧!

本内容是《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);

欢迎大家来到IT世界,在知识的湖畔探索吧!

在读取或设置文本框的值时也可以使用DOM方式，如使用setAttribute()来设置控件的value属性，但不推荐使用；另外获取textarea的value值与它的子节点的值并不定是一致 ；

欢迎大家来到IT世界,在知识的湖畔探索吧!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标记等自定义文本，如：

欢迎大家来到IT世界,在知识的湖畔探索吧!<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>