JS学习笔记7_表单脚本

摘抄自：https://www.cnblogs.com/ayqy/p/4420177.html

 

---

 

1.获取表单及表单元素引用的方式

 

var mForm = document.forms[formName];获取表单引用

 

mForm.elements[elemName]获取表单元素，如有同名的，则得到一组元素（例如radio button）

 

2.表单元素的常用属性、方法和事件

 

属性：

 

• name：字段名

• value：字段值

• type：字段类型，例如button, radio等等

• readOnly：设置只读

• disabled：设置禁用

 

方法：

 

• focus()：获得焦点

• blur()：取消焦点

 

事件：

 

• focus：获得焦点时触发

• blur：失去焦点时触发

• change：文本框input和文本域textarea在失去焦点且value值改变时触发，下拉列表框select选项改变时触发

 

3.提交表单的方式

 

1. 按钮提交

2. 代码提交：form.submit();

3. 回车提交：在除textarea外的任意表单域中按Enter

 

注意：

 

1. 代码提交不会触发submit事件，因此必须在这之前验证表单数据

2. 代码重置会触发reset事件，但在实际应用中并不常用reset功能，因为如果误操作点了重置的话会很伤

 

4.几种提交按钮

 

1. 通用提交按钮：<input type=”submit”>

2. 自定义提交按钮：<button type=”submit”></button>

3. 图像按钮：<input type=”image” src=url>

4. 其它非按钮元素：<a href=url onclick=”forms[‘mForm’].submit();”>提交</a>

 

注意：高程上说只有当表单里有前三种按钮之一时，按下Enter键才会提交表单，但本机在IE8，FF,Chrome中测试发现都可以提交（就算表单中只有个文本框，回车也能提交）

 

5.文本框/文本域（input/textarea）选中部分/全部内容

 

主流方式：

 

1 2 3

var text = document.forms[0].elements['userName']; text.select();//全选 text.setSelectionRange(0, 3);//选择前3个字符（3个汉字或者字母）

 

[IE8-]设置/获取选中文本的方式与主流方式不同，设置选中的方式如下：

 

1 2 3 4 5

var range = text.createTextRange(); range.collapse();//把范围折叠到开始位置 range.moveStart('character', 0); range.moveEnd('character', 3); range.select();

 

P.S.选中在实现自动补全文本框时比较常用，例如浏览器的URL输入框

 

6.访问剪切板

 

对于访问剪切板，各浏览器的实现有差异，甚至有些浏览器不支持访问剪切板，所以不要试图修改不合适的剪切板内容以求验证通过，而应该阻止这些事件的默认行为，甚至在必要的时候可以禁用组合键

 

可以通过取消paste/cut/copy事件的默认行为来禁用剪切板

 

7.select的常用属性和方法

 

属性：

 

• options获取select的所有Option
• selectedIndex获取选中项的索引（没有选中为-1，多选为第一个选中项的索引）

 

方法：

 

• add(newOption, relOption);在relOption前插入newOption
• remove(index);移除索引为index的Option

 

8.option的常用属性和方法

 

属性：

 

• selected设置选中

• index获取该项在options中的索引

 

方法：

 

• 添加Option：

  1 2	var newOption(text, value);//一般text和value相同，value用于提交数据 selectbox.add(newOption, undefined);//在末尾插入

• 移除Option：

  1 2 3 4

  selectbox.remove(index);//移除第index项 while(selectbox.options.length){//移除所有项   selectbox.remove(0); }

 

9.实现富文本框的两种方式

 

1. 插入iframe，设置src为空文档，并设置frames[iframeName].document.designMode = ‘on';即可实现body可编辑

2. 设置任意元素的contentEditable属性，例如p.contentEditable = ‘true';可以实现任意元素可编辑

 

注意：

 

1. 上面给出的两种方式都是全浏览器兼容的，不必担心contentEditable是HTML5属性，因为IE在很多年前就实现了它，本机测试[IE6+]都支持

2. contentEditable注意大写的E，小写无效

3. 富文本框并不是表单元素，所以不会自动提交，需要用隐藏表单字段来携带富文本内容

4. 虽然支持对富文本框内容的格式化（加粗、设置前/背景颜色等等），但各个浏览器的具体实现不同，因而相同的命令可能生成不同的文本内容