《JavaScript高级程序设计》读书笔记14.2文本框脚本

在 HTML 中，有两种方式来表现文本框：
- 一种是使用<input>元素的单行文本框;
- 另一种是使用<textarea>的多行文本框。

`<input>`

必须将<input>元素的type特性设置为”text”。
设置 size 特性，可以指定文本框中能够显示的字符数。
通过 value 特性，可以设置文本框的初始值。
通过maxlength特性则用于指定文本框可以接受的最大字符数

如果要创建一个文本框，让它能够显示25个字符，但输入不能超过 50个字符，可以使用以下代码：

1	<input type="text" size="25" maxlength="50" value="initial value">

`<textarea>`

指定文本框的大小，可以使用rows和 cols 特性。
- rows 特性指定的是文本框的字符行数，
- cols 特性指定的是文本框的字符列数
初始值必须要放在<textarea>和</textarea>之间
不能在 HTML中给<textarea>指定最大字符数。
它俩都会将用户输入的内容保存在 value 属性中。可以通过这个属性读取和设置文本框的值：
1
2
3
4
var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);

textbox.value = "Some new value";

不建议使用DOM方法。

1. 选择文本

上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。
在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，如下：

EventUtil.addHandler(textbox, "focus", function(event){
    event = EventUtil.getEvent(event); 
    var target = EventUtil.getTarget(event); 
     
    target.select(); 
});

1.1 选择（select）事件

与 select()方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select事件。
什么时候触发select事件，还会因浏览器而异。
调用 select()方法时也会触发 select 事件。

1.2 取得选择的文本

两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）.

1
2
3

function getSelectedText(textbox){ 
    return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 
}

IE8-不支持。

1.3 选择部分文本

所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：类似于substring()方法的两个参数.
要看到选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。
IE8-不支持。

2. 过滤输入

综合运用事件和DOM手段，就可以将普通的文本框转换成能够理解用户输入数据的功能型控件.

2.1 屏蔽字符

屏蔽所有按键操作：

EventUtil.addHandler(textbox, "keypress", function(event){ 
    event = EventUtil.getEvent(event); 
    EventUtil.preventDefault(event); 
});

只允许用户输入数值：

EventUtil.addHandler(textbox, "keypress", function(event){ 
    event = EventUtil.getEvent(event); 
    var target = EventUtil.getTarget(event); 
    var charCode = EventUtil.getCharCode(event); 
 
    //过滤掉非数字键、方向键、ctrl键
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){ 
        EventUtil.preventDefault(event); 
    } 
});

2.2 操作剪贴板

下列就是 6个剪贴板事件。

beforecopy：在发生复制操作前触发。
copy：在发生复制操作时触发。
beforecut：在发生剪切操作前触发。
cut：在发生剪切操作时触发。
beforepaste：在发生粘贴操作前触发。
paste：在发生粘贴操作时触发。

3. 自动切换焦点

为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。

<input type="text" name="tel1" id="txtTel1" maxlength="3"> 
<input type="text" name="tel2" id="txtTel2" maxlength="3"> 
<input type="text" name="tel3" id="txtTel3" maxlength="4"> 

(function(){ 
 
    function tabForward(event){ 
        event = EventUtil.getEvent(event); 
        var target = EventUtil.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 textbox1 = document.getElementById("txtTel1"); 
    var textbox2 = document.getElementById("txtTel2"); 
    var textbox3 = document.getElementById("txtTel3"); 
 
    EventUtil.addHandler(textbox1, "keyup", tabForward); 
    EventUtil.addHandler(textbox2, "keyup", tabForward); 
    EventUtil.addHandler(textbox3, "keyup", tabForward); 
 
})();

4. HTML5约束验证API

在 HTML 标记中为特定的字段指定一些约束，然后浏览器才会自动执行表单验证，Firefox 4+、Safari 5+、Chrome和 Opera 10+。

4.1 必填字段

表单字段中指定了required属性，任何标注有 required 的字段，在提交表单时都不能空着。这个属性适用于<input>、 <textarea>和<select>字段。

4.2 其他输入类型

“email”类型要求输入的文本必须符合电子邮件地址的模式。
“url”类型要求输入的文本必须符合 URL 的模式。

1 2	<input type="email" name ="email"> <input type="url" name="homepage">

4.3 数值范围

4.4 输入模式

HTML5 为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。

4.5 检测有效性

checkValidity()方法可以检测表单中的某个字段是否有效。

4.6 禁用验证

设置novalidate属性，可以告诉表单不进行验证。