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:从字面上理解清楚剪切板,书上没有具体说,尝试了下,这个方法不能用。