js表单--笔记（七）

获取表单元素：可以通过id获取也可以通过document.forms[0] // 获取页面中第一个表单

提交表单

var form = document.getElementById("myForm"); form.submit(); 可以调教表单，但是不能触发submit事件

注意：用户有可能重复提交表单，这样可能会造成多次下单，所以提交表单后就禁用提交按钮或利用onsubmit事件

重置表单

var form = document.getElementById("myForm"); form.reset(); 触发reset事件

表单字段

elements：所有表单元素的集合（input、textarea、button、fieldset）

form.elements[0] 获取第一个元素

form.elements["color"] 获取name为color的集合（只有一个时不会返回集合）

form.elements.length 数量

H5添加了autofocus自动获取焦点如果浏览器不支持，可以使用focus() blur() 方法

事件：focus：获取焦点时触发

blur：失去焦点时触发

change：对于input、textarea，失去焦点并且value值改变时，触发

对于select，选择了不同选项时触发

<input type = "text" size = "10" maxlength = "7" value = "pwd"> // 宽度为10个字符、最大输入7个字符的文本框

<textarea rows = "20" cols = "10">内容</textarea> // 宽度为20个字符，高度为10个字符的文本框

上述两种文本框都有select()方法，获取所有文本（例子：就例如，点击上面的URL地址（获取焦点）时，会全部选择，效果就是这样）

select事件：选择文本时触发（不是点击文本，而是框选）

selectionStart和selectionEnd：H5新增，获取框选文本开头和结尾的文字所在的下标（例如，文本时asdfghjk，框选了dfgh， selectionStart就是d的下标2，selectionEnd就是5）；但是IE8及以下不支持，但支持document.selection对象

setSelectionRange(索引，索引)：获取索引之间的字符；IE8及以下不支持，但支持moveStart()和moveEnd()

H5新增约束验证API

required：必填

新增type属性：email、url

number、range、detetime、datetime-local、date、month、week、time

min 可输入的最小值 max 可输入的最大值 step 输入的值只能是这个值的倍数

pattern：正则表达式

novalidate：禁用验证

selected：默认选项被选中

select：选择框

<option value = "green">green</option>

</select>

如果option中的value = “” 的，那么选择该选项时，选择框的值就是空的，如果没有value，则选择框的值为文本的值

获取选项中的文本：ele.option[0].text;

获取选项中的值：ele.option[o].value;

selectedIndex：获取当前选项的索引

例如：（下面代码在change事件函数中）

var index = sel.selectedIndex;

var value = sel.options[index].value; // 获取选项中的value值

add(ele，索引)：添加选项

remove(索引)：移除选项（ele.option[0] = null也可以）

编辑富文本内容：

iframe：在网页中显示网页

<a href = "http://www.baidu.com" target = "myframe">baidu</a> // 点击这个a标签，链接会在iframe中显示

contenteditable：属性，给div添加即可

js表单--笔记（七）

猜你喜欢