码迷,mamicode.com
首页 > Web开发 > 详细

JS学习笔记7_表单脚本

时间:2015-04-12 20:55:02      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

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

JS学习笔记7_表单脚本

标签:

原文地址:http://www.cnblogs.com/ayqy/p/4420177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!