转行前端自学学习记录——表单脚本

1、表单对象form可以通过document对象属性form直接访问:document.form,访问得到的是HTMLFormCollection对象。表单对象拥有几点属性:(1)elements属性,访问表单里的所有控件元素(input select button【type=submit】textarea)

(2)length属性,表示表单里控件的数量。(3)reset()方法,重置表单。(4)submit()方法提交表单

2、文本框控件input通过focus() blur() select()方法可增加文本框的易访问性。select()方法全选文本框内容。select事件在选择输入框内容时触发。通过正则表达式的test方法,可以控制文本框输入内容类型,如图:

转行前端自学学习记录——表单脚本

正则表达式[^\d\s]过滤不是数字以及空格的字符输入,通过事件对象的preventDefault方式禁止时间默认类型(此处为keypress输入)。focus事件程序在文本框获取焦点时,执行select()方法,选中所有输入框文本。select事件程序通过selectionStart,selectionEnd属性得到选中文本的起止位置的字符。

3、选择框控件select,默认单选(select-one)通过multiple属性可通过Ctrl键多选。select控件对象有常用的属性与方法:add(newOption,relOption)插入新option控件,options属性获取所有<option>元素集合。selectedIndex属性获取已选中的option元素位置(从0开始计数),若选择多项,则只返回第一项位置。remove(index)移除指定的option元素。

select元素下的option元素对象也有常用的属性与方法:length属性返回option元素个数。index属性返回option元素索引位置,selected属性返回元素是否被选中(true/false),也可通过设定其值改变元素选定状态。text属性返回option文本值,value返回option的value属性值。若未设置value属性,则value默认是text的值。