zoukankan      html  css  js  c++  java
  • [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 属性配合使用,来定义可见选项的数目。

  • 相关阅读:
    软件测试人员的年终绩效考核怎么应对
    收藏
    顶踩组件 前后两版
    订阅组件
    hdu 1963 Investment 完全背包
    hdu 4939 Stupid Tower Defense 动态规划
    hdu 4405 Aeroplane chess 动态规划
    cf 414B Mashmokh and ACM 动态规划
    BUPT 202 Chocolate Machine 动态规划
    hdu 3853 LOOPS 动态规划
  • 原文地址:https://www.cnblogs.com/sybboy/p/6672290.html
Copyright © 2011-2022 走看看