form表单

form元素中的子元素都可以通过form属性来得到form元素。比如input.form

 

一些表单元素可以有required属性，用于表示必填字段。在提交表单，如果必填字段未填写，则会有提示，并且不能提交表单。

 

所有表单元素都有个checkValidity方法，这个方法返回当前表单元素的值是否有效。

 

 

form元素的属性和方法：

 

action：接收请求的URL，可以在元素中设置

 

elements：在form元素中的子元素的值可以通过form元素的elements属性来获取。可以通过对应字段名称来获取字段。例如：form.elements[‘name’]，这样子就会获取name为’name’的表单字段。

 

method: 要发送的HTTP请求类型，通常是“get”或“post”。

 

reset()：将所有表单域重置为默认值。

 

submit()：运行这个方法可以提交表单。

 

submit：form元素有这个监听事件，在提交表单时触发。可以通过event.preventDefault()来取消表单提交的默认行为。

 

 

文本框：

 

size：可以限制文本框显示的字符数。

 

maxlength：可以用来指定文本框可以接受最大字符数。

 

value：用于设置文本框的初始值。

 

type: 这个属性可以是多种类型值，它会验证表单中的值是否符合类型。比如：url，email，number，range(可以给它设置min和max，然后通过事件得到其值)，datetime-local，date，month，week，time。不会阻止提交表单，需要配合required属性。

 

pattern: 可以用于匹配文本框中的值。

 

 

 

 

多行文本框：

 

rows:用于指定文本框的字符行数。

 

cols：用于指定文本框的字符列数。

 

value：用于设置文本框的初始值。

 

选择框：

 

selectedIndex: 这个属性返回选择框元素中选中的项的位置，可以通过selectBox.options[selectBox.selectedIndex]来访问到被选中的option。

 

可以通过选择框的options来访问到所有的option元素，同时option元素，它有这些值：

 

index: 当前选项在options集合中的索引。

 

selected：布尔值，表示是否被选中。可以直接赋值来修改。

 

text：选项的文本，也可以直接赋值修改。

 

value：选项的值，也可以通过赋值来修改。

 

 

 

单选按钮：

 

单选按钮的值可以通过它的名称在表单中找到相对应的对象，并且通过这个对象的value属性来获取选中项的值。可以通过单选按钮元素的checked来判断单选按钮是否被选中。

 

 

 

多选按钮：

 

多选按钮的值，只能通过访问多选按钮。然后确认checked属性为true来判断是否选中。可以通过元素获取值。

 

 

富文本编辑：

 

contenteditable：这个属性可以设置元素为可编辑的富文本，直接在html上加上这个属性就可以。

 

execCommand：这个documen的方法可用于设置富文本框选中文字的一些样式。这个方法接受三个参数。要执行的命令名称，第二个参数设为false就可以了，执行命令必须的一个值（如果不需要，可以传null）。例如：设置选中文字的字体大小(document.execCommand(‘fontsize’, false, 2))。

 

queryCommandValue：这个document属性可用于获取当前选中文本设置的值。只接受一个参数，要查询的命令。

 

queryCommandState：这个document属性可用于确认选中文本是否应用了指定命令。只接受一个参数，要查询的命令。

 

 

 

选择文本：

 

select：文本框都支持这个方法。这个方法可以让文本框选择所有的文本。

 

select事件：当用户选择文本框内的文本时，会触发这个事件。

 

selectionStart: 文本框元素的属性，当用户选中某一段文字时，返回开始选中文本的位置。

 

selectionEnd：文本框元素的属性，当用户选中某一段文字时，返回结束选中文本的位置。

 

selectionRange：文本框元素的方法，这个方法接受两个参数，开始选中的位置以及结束选中位置加1。它会选中指定位置的文本。注意：调用这个方法的前后，元素一定要立即获取到焦点。

 

 

 

操作剪贴板：

 

以下是剪切板事件：

 

beforecopy: 在发生复制操作前触发。

 

copy：在发生复制操作时触发。

beforecut：在发生剪切操作前触发。

 

cut：在发生剪切操作时触发。

 

beforepaste：在发生粘贴操作前触发。

 

paste：在发生粘贴操作时触发。

 

这些before事件不可以阻止默认行为，但是其他事件，可以阻止默认行为。

 

 

 

clipboardData：在触发以上事件时，event会有这个属性。这个属性有三个方法，分别是：

 

getData：从剪切板获取数据，它接受一个参数，要取得数据的格式。一般用text，它可以代表text/plain。

 

setData：修改修改剪切板中的文本，第一个参数是数据格式，只能支持text/plain。第二个是放在剪切板中的文本。(测试了好想不行)

 

clearData: 从字面上理解清楚剪切板，书上没有具体说，尝试了下，这个方法不能用。