zoukankan      html  css  js  c++  java
  • javascript操作表单

    表单元素除了可以运用上述所有DOM相关操作外,为了简化,还有一系列自己的属性和方法。 

    表单除了支持鼠标,键盘,更改和html时间之外,还支持一些表单特有的事件,如focus,change,blur等等。 

    一、form表单元素

    1.获取表单上的form元素

    1)document.getElementById()

    2)document.forms 可以获得页面上所有的form元素,在这个集合中,可以通过数值索引或者表单的name属性来取得特定的表单。如:

    document.forms[0],document.forms['name']

    2.form独有的属性和方法:

    特有属性:

    action:等同于html中的aciton特性

    length:表单中控件的个数

    method:等同于html中的method

    name:等价于html中的name

    elements:表单中所有控件的集合。通常利用数值索引或者控件的name作为索引来得到控件的引用,如elements[0]或者elements['username']。这有时候比通常的dom方法要方便得多。如果多个表单空间都使用同一个name(如单选按钮),就会返回以该name命名的一个NodeList集合。

    特有方法(通过这些方法可以主动触发对应时间):

    a.表单提交 focus

    当用户单击提交按钮或者图像按钮的时候,就会提表单,包括

    <input type='submit' value='xxx'>

    <button type='submit'>提交</button>

    <input type-='image' src='xxx'>

    用这种方式提交表单,在请求发送之前会触发表单的submit事件,阻止这个事件就可以取消表单提交。

    此外,js中利用编程方式调用submit()也会提交表单而无需包含任何提交按钮,不过使用这种方法提交的时候,不会触发submit事件,因此要记得调用此方法之前先验证表单数据。

    b.表单重置 reset

    同样,重置也有两种方法

    用户点击重置按钮,表单会被重置

    <input type='reset' value='xxx'>

    <button type='reset'>reset</button>

    js中调用表单的reset()方法也可以重置表单,和submit()不同的是,这种方法会像点击重置按钮一样触发reset事件。

     

    二.表单字段元素

    表单的字段包括但不限于:

    input(type的可选值包括:text,submit,radio,checbox),textarea,button,fieldset,select>option等。html5还增加了很多新类型,包括input(type可选值包括password,url,email等等)这里对此不再探讨。

    表单中的元素字段可以利用dom方法访问,也可以利用form的elements属性,利用数值或者name属性获得具体的引用。这些表单元素的属性和方法如下:

    1)共用属性

    disabled:代表当前字段是否被禁用。备注:在web开发中,为了避免表单的重复提交,最常见的解决方案是,监听表单的submit事件,在该事件发生时候,设置提交按钮的disable=true.

    form:指向当前字段所属的表单

    readOnly:代表是否只读

    tabIndex:当前字段的切换(tab)序号

    form:指向当前字段所属表单的引用。

    name:当前字段的名称

    type:字段类型,如text,radio,checkbox,select one,select multiple等

    value:当前字段将被提交至服务器端的值。对于表单字段来说,建议使用value进行属性的读取和设置,而非典型的DOM方法。

      对于<input type='text'>,<textarea></textarea>来说,用户输入的内容保存在value中。

      对于select元素,value的值由当前的选中项决定。如果没有选中项,那么为空字符串,如果有多个,则由第一个决定。

      对于input:radio/checbox,value的值根据当前元素是否checked决定。

    2)表单字段的公用方法

    blur():可以主动触发blur事件

    focus():可以主动触发focus事件

    3)表单字段的共用事件

    blur:当前字段失去焦点时候触发

    focus:当前字段获得焦点时出发

    change:对于<input>,<textarea>等元素,在它们失去焦点并且value值改变的时候触发,对于<select>元素,在选项改变时就会触发。

     

    三、input[type=text]与textarea 文本框字段 

    <input type="text" size="25" maxlength="50" value="initial value">

    input[type=text]可以使用size指定文本框能够显示的字符数,可以通过maxlength限制文本框能够接受的最大字符数,可以使用value属性指定初始值

    <textarea name="" id="" cols="5" rows="25">initial value</textarea>

    textarea可以使用rows指定字符行数,cols指定字符列数。其初始值应当放在<textarea>和</textarea>之间。

    文本框除了支持表单字段公共的focus,blur事件外,常用的事件还包括:

    1)change:在text和textarea失去焦点并且value值改变的时候出发。

    2)keypress:用于过滤输入

    3)keyup:

    4)select事件与select主动触发方法

    select()事件用于选择文本框中的所有文本(比如当文本框包含默认值,用户就不用一个个删除),与select()方法对应的,是select事件,这个事件在用户选择文本并且释放了鼠标的时候触发。可以通过文本元素的selectionStart和selectionEnd来取得选择的文本。

    html5还提供了主要触发选择部分文本的方法,这里不再赘述。

    四、下拉框字段select与option

         <select name="select" id="select">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
         </select>

    1)select的特有属性

    select的type值不是“select-one”就是“select-multiple”,取决于html标签中是否有multiple特性。

    multiple:boolen值,是否允许多选

    options:所有<option>元素的HTMLCollection

    selectedIndex:选中项的索引

    select的value值由当前的选中项决定,规则如下:

    a.如果没有选中项,则value为'';

    b.如果有一个选中项,并且该项的value已经在html中指定,则value等于html中指定;‘’

    2)select特有方法 

    add(newOption,relOption):向控件插入新的option,在relOption之前

    remove(index).删除索引为index的option

    3)option也有一些特有的属性,包括:

    index:当前option的索引;

    selected:是否被选中

    text:选项的文本

    value:选项的值

    4)下拉框的创建操作

    A。获得选中项的值

    如果是单选

    selectbox.options[selectbox.selectedIndex].value  

    如果是多选,那么只有遍历,检测每个属性的selected属性取得了

    B:设置选项

    //方法一,仅针对单选
    selectbox.selectedIndex=index;
    //方法二
    selectbox.options[index].selected=true;

    C:监听value改变事件(change事件)

    selectbox.addEventListener('change',function(e){
        doSomething();
    };false);

    D:添加选项

    //如果添加多项,最好还是采用innerHTML方法
    //如果添加单个option,dom方法不如下面的方法简便:
    var option=new Option('option text','option value');
    selectBox.add(option,undefined);

    E:删除选项

    //可以使用dom的removeChild,也可以使用下面的方法删除单个option
    selectbox.remove(0);

    五、单选按钮 

         <div class="radio-group">
             <label><input type="radio" name="sex" value="femail">男</label>
             <label><input type="radio" name="sex" value="mail">女</label>
         </div>

    常见操作:

    A:获取单选按钮对应的NodeList

    //方法一
    form.elements['sex']
    //方法二
    document.getElementsByName('sex')

    B:获取单选按钮选中项的值

    //没有更好的办法,只有遍历
    for(var i=0;i<radios.length;i++){
        if(radios[i].checked){
            return radios[i].value;
        }
    }

    不过后台获取radio提交的值,貌似只用取name对应的字段属性即可

    C:监听单选按钮选中项更改的事件(注意监听的是click事件,建议使用委托)

    radioGroup.addEventListener('click',function(e){
        if(e.target.type=='radio'){
            doSomething();
        }
    },false);

    六:复选框checkbox 

         <div class="checkbox-group">
             <label for="swim"><input type="checkbox" name="sport" id="swim" value="游泳"></label>
             <label for="running"><input type="checkbox" name="sport" id="runing" value="跑步"></label>
             <label for="ball"><input type="checkbox" name="sport" value="羽毛球" id="ball"></label>
         </div>

    常见操作:

    A:获取复选框列表,方法同单选框,利用getElementsByName或者form.elements][name]

    B:获取复选框选中的值:方法和单选框类似,只能遍历所有值,后台获取复选框的值相对简单,name对应的是一个数组

    C:监听复选框选中状态的变化,和单选框类似,也需要监听click事件

     

  • 相关阅读:
    多表联合查询,利用 concat 模糊搜索
    order by 中利用 case when 排序
    Quartz.NET 3.0.7 + MySql 动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(一)
    ASP.NET Core 2.2 基础知识(十八) 托管和部署 概述
    ASP.NET Core 2.2 基础知识(十七) SignalR 一个极其简陋的聊天室
    ASP.NET Core 2.2 基础知识(十六) SignalR 概述
    ASP.NET Core 2.2 基础知识(十五) Swagger
    ASP.NET Core 2.2 基础知识(十四) WebAPI Action返回类型(未完待续)
    linux磁盘管理 磁盘查看操作
    linux磁盘管理 文件挂载
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/6279943.html
Copyright © 2011-2022 走看看