JS学习笔记7_表单脚本

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）选中部分/全部内容

主流方式：

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

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

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：

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

• 移除Option：

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