zoukankan      html  css  js  c++  java
  • 表单脚本

    第一部分

    1.在js中直接使用form.submit()不会调用submit事件,因此要先验证,而form.reset()跟用DOM2级别来写一样都会触发reset事件

    2.重置表单的需求很少见,比之常见的做法是提供一个取消按钮

    3.以下是第一次单击按钮后禁用提交按钮

      EventUtil.addHanlder(form, "submit", function(event){
           event = EventUtil.getEvent(event);
           var target = EventUtil.getTarget(event);
           //取得提交按钮
           var btn = target.elements[0];
           //禁用它
           btn.disabled = true;
       });  这里使用submit而不用onclick的原因在于submit在不同的浏览器可先于或后于onclick

    4;HTML5为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中。只要设置这个属性,不用javascript就能自动把焦点移到相应字段写法如:<input type ="text" autofocus/> 支持它的有firefox4+ safari5+ chrome opera9.6

    5.默认情况下,只有表单字段可获焦点,对于其他元素而言,如果先将其tabIndex属性设置为-1 再调用focus()方法,也可让元素获得焦点

    6.关于blur 和change事件的关系 ,它们执行的先后顺序是不确定的,不受代码先后顺序的影响。

    第二部分  HTML5约束验证API

    1.必填字段:required属性  如<input type="text" name="username" required/> 这个属性使用于<input> <textarea> <select>

    2.检测有效性:代码如下


    <body>
    <form>
    <input type="number" min="0" max="100" step="5" name="count" />
    <input type="button" onclick="a()" value="submit"/>
    </form>
    <script>
    function a(){
       if(document.forms[0].elements[0].checkValidity()){
          alert("有效");
       } else {
          alert("无效");
       }
    }//此代码在chrome safari opera 可执行 火狐未完全实现  IE有错
    </script>
    </body>

    第三部分 选择框脚本

    HTMLSelectElement类型提供以下属性和方法;

    add(newOption, relOption) :向控件中插入新<option>元素,其位置在相关项(relOption之前)
    multiple: 布尔值,表示是否允许多项选择;等价HTML的multiple特性。
    options:控件中所有的<option>元素的HTMLCollection。
    remove(index):移除给定位置的选项。
    selectIndex:基于0的选中项的索引,如果没有选中项则值为-1.对于支持多选的控件,只保存选中项的第一项索引。
    size:选择框中可见的行数;等价于HTML中size特性。

    HTMLOptionElement对象添加了下列属性

    index:当前选项在options集合中的索引

    label:当前选项的标签,等价于HTML中的label特性。

    selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。

    text:选项的文本; value:选项的值。

    可以使用下面方法来找值:

    var  selectbox = document.forms[0].elements["location"];

    var text = selectbox.options[0].text;

    var value = selectbox.options[0].value;

    注意:选择框的change事件与其他表单字段的change事件触发条件不一样。其他表单字段的change事件是在值被修改且焦点离开当前字段时触发。而选择框的change事件只要选中了选项就会触发。

  • 相关阅读:
    理解HTTP的POST和PUT的区别
    眼见为实 — CSS的overflow属性
    Iconfont的代码使用
    JSP中contentType、pageEncoding和meta charset的区别
    在 webpack 中使用 ECharts
    MVC 中的 ViewModel
    一个简单例子理解C#的协变和逆变
    C#中使用委托、接口、匿名方法、泛型委托实现加减乘除算法
    c#打包文件解压缩
    8种主要排序算法的C#实现 (二)
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2643937.html
Copyright © 2011-2022 走看看