表单（二）文本框

表现文本框的两种方式：单行文本框<input>、多行文本框<textarea>

<input type="text" size="显示的字符数" value="文本框的初始值" maxlength="可以接收的最大字符数">
<textarea rows="文本框的字符行数" cols="文本框的字符列数">文本框的初始值</textarea>

两者都是把用户输入的内容保存在value属性中。可以通过 “文本框.value ” 来读取或设置文本框的值

---

【选择文本】

1.获取文本框中的所有文本： 文本框.select()

使用select方法时，大多数浏览器(opera除外)会将焦点设置到文本框中。同时使用该方法会触发select事件。

//在文本框获得焦点时，选择文本框中的所有文本
EventUnit.addHandler(文本框,"focus",function(event){
    event = EventUnit.getEvent(event);
    var target = EventUnit.getTarget(event);
    target.select();
});

2.获取用户选择的那一部分文本：

1. 使用selectionStart和selectionEnd属性

2. IE8及之前版本：使用document.selection对象（selection对象保存着用户在整个文档范围内选择的文本信息）

function getSelectedText(textbox){
    if(typeof textbox.selectionStart == "number"){
       return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }
    //IE8及更早版本
   else if(document.selection){
       return document.selection.createRange().text;
    }
}

3.选择部分文本 :

1. 文本框.setSelectionRange(起始字符索引，结束字符索引+1)

2. IE8及更早版本：
    （1）在文本框上创建一个范围
    （2）将范围折叠到文本框开始位置
    （3）使用moveStrat()和moveEnd()方法

#倘若想看到选择的文本，就要在调用setSelectionRange方法之前或之后立即把焦点设置到文本框。

//选择部分文本
function setSelectedText(textbox, startIndex, endIndex){
    if(textbox.setSelectionRange){
        return textbox.setSelectionRange(startIndex,endIndex+1);
    }
    else if(textbox.createTextRange){
        var range =textbox.createTextRange();
        range.collapse(true);   //将范围折叠到文本框开始位置
        range.moveStart("character",startIndex); //第一个参数是移动单位，第二个参数是开始位置
        range.moveEnd("character",endIndex+1-startIndex);//第一个参数是移动单位，第二个参数是传入的字符总数
        range.select();
    }
}

---

【过滤输入】

1.屏蔽字符

//只允许用户输入数值
EventUnit.addHandler(表单.elements[0],"keypress",function(event){
   event = EventUnit.getEvent(event);
   var target = EventUnit.getTarget(event);
  //取得字符编码
   var charCode = EventUnit.getCharCode(event);
 //将字符编码换成字符串
   if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
       EventUnit.preventDefault(event);
   }
});

2.操作剪贴板

1. beforecopy    在复制前触发
2. copy          在复制时触发
3. beforecut     在剪切前触发
4. cut           在剪切时触发
5. beforepaste   在粘贴前触发
6. paste         在粘贴时触发

要访问剪贴板中的数据，在IE中使用 window.clipboardData;
在其他浏览器使用 event.clipboardData

---

【自动切换焦点】

常见应用场景：在用户填写完当前字段后，自动把焦点切换到下一个字段。

//自动切换焦点，通常指定keyup事件，因为keyup事件会在用户输入新字符后触发，所以此时是检测文本框内容长度的最佳时机。

//HTML代码：
<input type="text" name="tel1" id="texTell1" maxlength="3">
<input type="text" name="tel2" id="texTell2" maxlength="3">
<input type="text" name="tel3" id="texTell3" maxlength="4">

//Js代码：
function tabForward(event){
    event = EventUnit.getEvent(event);
    var target = EventUnit.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 text1 = document.getElementById("texTell1");
var text2 = document.getElementById("texTell2");
var text3 = document.getElementById("texTell3");
EventUnit.addHandler(text1,"keyup",tabForward);
EventUnit.addHandler(text2,"keyup",tabForward);
EventUnit.addHandler(text3,"keyup",tabForward);

效果如图所示：
当第一个框输完3个数字后，焦点自动切换到第二个框，当第二个框输完3个数字后，焦点自动切换到第三个框。

---

【HTML5约束验证API】

在将表单提交到服务器前验证数据：

1.在表单字段中指定了required属性，在提交表单时不能为空

<input type="text" name="username" required>

（如果指定requires属性的字段没有填写，FireFox4和Opera会阻止表单提交，Chrome和Safari不阻止表单提交）

2.为input的type类型增加了“email”和“url”
3.为input新增了pattern属性，值为一个正则表达式，用于匹配文本框中的值
4.（1）检测 “表单中的某个字段”/“整个表单” 是否有效：
    字段.checkValidity() / 表单.checkValidity()

  （2）检测 “表单中的某个字段” 有效或无效的原因：
    字段.validity

//检测表单中某个字段有效或无效的原因
if(x.validity && !x.validity.valid){
    if(x.validity.valueMissing){
        alert("没有在标注为required的字段中填写值！");
    }
    else if(x.validity.typeMismatch){
        alert("没有按照mail或url要求的格式填写值！");
    }
    else if(x.validity.rangeOverflow){
        alert("输入的值超过max");
    }
    else if(x.validity.rangeUnderflow){
        alert("输入的值少于min");
    }
    else if(x.validity.patternMismatch){
        alert("输入的值与指定的pattern属性不匹配");
    }
    else if(x.validity.tooLong){
        alert("输入的值超过maxlength指定的长度");
    }
}

5.禁用表单验证 : 在form标签上添加 novalidate属性
  点击提交按钮不必验证表单： 在提交按钮上添加formnovalidate属性