博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript操作表单
阅读量:5157 次
发布时间:2019-06-13

本文共 4113 字,大约阅读时间需要 13 分钟。

表单元素除了可以运用上述所有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指定文本框能够显示的字符数,可以通过maxlength限制文本框能够接受的最大字符数,可以使用value属性指定初始值

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

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,也可以使用下面的方法删除单个optionselectbox.remove(0);

 

五、单选按钮 

 

 

常见操作:

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

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

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

//没有更好的办法,只有遍历for(var i=0;i

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

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

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

 

六:复选框checkbox 

常见操作:

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

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

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

 

 

 

转载于:https://www.cnblogs.com/bobodeboke/p/6279943.html

你可能感兴趣的文章
关于PHP会话:session和cookie
查看>>
jQuery on(),live(),trigger()
查看>>
[Docker]Docker拉取,上传镜像到Harbor仓库
查看>>
导航,头部,CSS基础
查看>>
转负二进制(个人模版)
查看>>
LintCode-Backpack
查看>>
查询数据库锁
查看>>
我对于脚本程序的理解——百度轻应用有感
查看>>
面试时被问到的问题
查看>>
注解小结
查看>>
list control控件的一些操作
查看>>
判断字符串在字符串中
查看>>
201421410014蒋佳奇
查看>>
Xcode5和ObjC新特性
查看>>
Centos 7.0 安装Mono 3.4 和 Jexus 5.6
查看>>
CSS属性值currentColor
查看>>
Real-Time Rendering 笔记
查看>>
实验四2
查看>>
多路复用
查看>>
javascript 无限分类
查看>>