js之表单

思维导图

提交和重置

提交按钮定义方式有

• 通用提交按钮：input的type为submit
• 自定义提交按钮：button的type为submit
• 图片按钮：input的type为image

其对应的事件为submit，在按回车键时会触发，即在向服务器发送请求之前
注意：
通过 submit()方法调用时不会

重置按钮定义方式有

• 通用重置按钮：input的type为reset
• 自定义重置按钮：button的type为reset

其对应的事件为reset,在点击重置按钮时或者显示调用reset()方法时会触发

表单字段

常用属性

常用属性有

• value：要提交给服务器的值
• disabled：是否禁用
• form：所属表单
• name：控件名
• readonly：是否只读
• tabIndex：tab键时的切换顺序
• type：控件类型，字符串，比如radio或者checkbox

文本框

有两种形式

• 单行：input，type为text
• 多行：textarea

选中文本方式有

• 全选：select()
• 部分选择：setSelectionRange(start, end)

事件有select

ie选择有些特殊，步骤为

let range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character", start);
range.moveEnd("character", end);
range.select();

剪贴板相关事件有

• beforecut
• cut
• beforecopy
• copy
• beforepaste
• paste

剪贴板数据用event或者window的clipboardData，其有三个方法

• setData()
• getData()
• clearData()

html5约束验证支持的有

• required属性
• input新增类型，如email,url
• 数值范围
  • number
  • range
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
• pattern模式
• 表单检查有效性，使用方法checkValidity()
• 表单禁用验证，使用novalidate属性
• 表单字段禁用验证，使用属性formnovalidate

选择框

使用select和option
select新增属性，方法有

• multiple：是否支持多选
• options：所有的<option>
• selectedIndex：选中项的索引值，从0开始
• size
• add(newOption, relOption)
• remove(index)

option新增属性，方法有

• index：选项在options集合中的索引
• label：选项的标签
• selected：是否选中了当前选项
• text：选项的文本
• value：选项的值

富文本

支持两种形式

• iframe：即其document.designMode= "on"
• 元素设置了contenteditable

与富文本交互方式

• iframe的document.execCommand(<command>, false, value)
• document.queryCommandEnabled(<command>)
• document.queryCommandState(<command>)
• document.queryCommandValue(<command>)