[H5表单]一些html5表单知识及EventUtil对象完善

紧接着上面的文章，一开始准备一篇文章搞定，后来看到，要总结的东西还不少，干脆，把上面文章拆成两部分吧，这部分主要讲讲表单知识！

表单知识

1、Html5的autofocus属性。

有个这个属性，我们不用js就能自动把焦点移动到相应的字段。

例如：

<input type="text" value="" autofocus   />

2、获取选择的文本

很久之前，我写过一个关于编辑器的文章。javascript execCommand,复文本框神器。

今天我主要说一下如何获取文本框中选择的数值。html5中增加了两个属性：selectionStart，selectionEnd，可以获取开始的选择和结束的选择。

因此我们可以封装一个函数：

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;
    }
}

通过上面函数，来获取选择的文本，这个应用也是蛮多的。

3、选择部分文本

为了兼容性，我们也封装了一个函数。用到了setSelectionRange（）；函数如下：

//选择部分文本
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();
}

用法如下：

textbox.value="hello haorooms";
//选择所有文本
selectText(textbox,0,textbox.value.length); //hello haorooms
//选择前3个字符
selectText(textbox,0,3);//hel
//选择4-7个字符
selectText(textbox,4,7);//o h

4、html5剪切板事件

html5把剪切板事件纳入规范，6个剪切板事件！

beforecopy :发生在复制操作之前
copy:发生在复制操作时触发
beforecut:在剪切操作之前触发
cut:在发生剪切的时候触发
beforepaste:在发生粘贴操作之前触发
paste:在发生粘贴操作时触发

因此，我们再给EventUtil封装2个函数：

var EventUtil = {
  //紧接着之前的代码，之前的代码省略.......
    getClipboardText:function(event){//获取剪切板内容
        var clipboardData =(event.clipboardData|| window.clipboardData);
        return clipboardData.getData("text");
    },
    setClipboardText:function(event,value){//设置剪切板内容
        if(event.clipboardData){
            return event.clipboardData.setData("text/plan",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    }
};

5、自动切换焦点

我们在表单输入的时候，经常会现在输入长度，用maxLength，我们现在的想法就是，当输入长度到达最大时，让其自动切换焦点，增加用户体验，可以避免我们再用tab键或者鼠标了，那么在这里，我们封装一个函数吧~

(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;
                }
            }
        }

    }

vartextbox1=document.getElementById("textTel1"),
textbox2=document.getElementById("textTel2"),
textbox3=document.getElementById("textTel3");
EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward);

})();

完整案例下载，请等待“前端资料库上线”，该案例在前端资料库中！

6、html5约束验证API

假如我们要必填字段，可以如下写：

<input type="text" name="username" required > <!--必填字段 -->

html5增加了pattern属性，可以做正则验证，例如只输入数字

<input type="text" pattern="\d+" name="count" >

type是number的属性，我之前写过一篇文章，大家可以看一下：http://www.haorooms.com/post/touchweb_commonquestion

第一个就介绍了h5网站input 设置为type=number的问题。

7、检测有效性

主要是用checkValidity()方法和validity属性。 checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。

validity对象属性包含如下一系列属性：

valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址

用法如下：

if(input.validity && !input.validity.valid){
    if(input.validity.valueMissing){
        alert("不能为空")
    }else if(input.validity.typeMismatch){
        alert("控件值与预期类型不匹配");
    }
}

8、禁用验证

有验证就有禁止，我们可以在form标签中添加novalidate属性，可以让表单不自行验证。如果提交按钮有多个，为了指定点击某一个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。

如下：

<form action="/haorooms">
    <input type="text" id="text" required="">
    <input type="submit" value="跳过验证，直接提交"  formnovalidate>
</form>
<form action="/haorooms"  novalidate>
    <input type="text" id="text" required="">
    <input type="submit" value="直接提交">
</form>

9、去掉chrome记住密码后自动填充表单的黄色背景

我前面的文章分享几个前端干货，面试经常提，中，第三条，写过一个方法，去掉默认黄色背景。

在前面介绍方法基础上，我这里再补充一些！

设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码。如下：

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

同样，对应纯色表单，可以添加如下样式去除

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #2390cc inset;
}

10、multiple属性

<form action="demo_form.asp" method="get">
  Select images: <input type="file" name="img" multiple="multiple" />
  <input type="submit" />
</form>

可以接受多个值的文件上传！

<select multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

select中的multiple可以同时选择多个选项，把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。