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.提交表单的方式
-
按钮提交
-
代码提交：form.submit();
-
回车提交：在除textarea外的任意表单域中按Enter
注意：
-
代码提交 不会 触发submit事件，因此必须在这之前验证表单数据
-
代码重置 会 触发reset事件，但在实际应用中并不常用reset功能，因为如果误操作点了重置的话会很伤
4.几种提交按钮
-
通用提交按钮：<input type=”submit”>
-
自定义提交按钮：<button type=”submit”></button>
-
图像按钮：<input type=”image” src=url>
-
其它非按钮元素：<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.实现富文本框的两种方式
-
插入iframe，设置src为空文档，并设置frames[iframeName].document.designMode = ‘on';即可实现body可编辑
-
设置任意元素的contentEditable属性，例如p.contentEditable = ‘true';可以实现任意元素可编辑
注意：
-
上面给出的两种方式都是全浏览器兼容的，不必担心contentEditable是HTML5属性，因为IE在很多年前就实现了它，本机测试[IE6+]都支持
-
contentEditable注意 大写的E ，小写无效
-
富文本框并不是表单元素，所以不会自动提交，需要用隐藏表单字段来携带富文本内容
-
虽然支持对富文本框内容的格式化（加粗、设置前/背景颜色等等），但各个浏览器的 具体实现不同 ，因而相同的命令可能生成不同的文本内容
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
