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 属性配合使用,来定义可见选项的数目。

  • 相关阅读:
    StringHelper类的代码也写得不错,值得好好学习学习
    开发感慨
    取地址参数的方法
    在C#中运用SharpZipLib和unrar进行解压缩
    我的模板分析引擎类PHP的.net开发方法功能介绍篇
    分析模板的一段简单快速的算法片段
    关于文件操作的一些感悟
    关于自定义模板的设计
    JS中的函数、Bom、DOM及JS事件 pixel
    什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性) pixel
  • 原文地址:https://www.cnblogs.com/sybboy/p/6672290.html
Copyright © 2011-2022 走看看