javascript操作表单

Posted 2020-08-27 初学者学习笔记

表单元素除了可以运用上述所有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事件