javascript高级程序设计 第十四章--表单脚本

Posted 2020-08-30

　　　　　　　　　　javascript高级程序设计 第十四章--表单脚本
在html中表单由<form>元素表示，在js中表单对应的是HTMLFormElement类型，这个类型也有很多属性
和方法；取得表单元素的引用还是为它添加id特性，用DOM操作来获取表单元素；
提交表单：把<input>或<button>元素的type特性设置为"submit"，图像按钮把<input>元素的type特性设
置为"image",也可以调用submit()方法， prevetnDefault()方法可以阻止表单提交
重置表单：把<input>或<button>元素的type特性设置为"reset"，也可以调用reset()方法
表单字段：每个表单都有elements属性，这个属性是一个元素集合的有序列表，其中包含着表单的所有字段，
如果是多个相同的元素则返回一个NodeList；所有表单字段都有一些相同的属性，比如：disabled, form,
name, readOnly, tabIndex, type, value等，访问这些属性以得到表单字段的信息；所有表单字段都有focus()
和blur()方法，这两个方法仅仅是把焦点转移或移走而已。
文本框脚本
<input>表示单行文本框，<textarea>表示多行文本框，他们的大多特性都相似，但是不能再HTML中给<textarea>
指定最大字符数；
选择文本：调用select()方法选择文本框中的文本，该方法直接调用不接收参数，但会触发select事件；要顺利
地取得选择的文本添加selectionStart和selectionEnd属性，表示选择文本的范围；substring()方法是基于
字符串的偏移量执行操作；选择部分文本调用setSelectionRange()方法，这个方法接收两个参数，要选择的
第一个字符索引和最后一个字符索引。
过滤输入
屏蔽字符：类似阻止表单提交的方法prevetnDefault()可以来屏蔽所有按键操作，当然运用这类方法要结合正则
和字符编码
操作剪贴板：有以下6个操作剪贴板事件：beforecopy, copy, beforecut, cut, beforepaste, paste ,要访问剪贴
板中的数据，要使用clipboardData对象，这个对象也是window对象和event对象的属性，操作clipboardData
对象主要有三个方法，getData() , setData() , clearData()用于从剪贴板中获取数据
必填字段：为表单字段指定required属性
禁用验证：设置novalidate属性表单可以不进行验证
选择框脚本
选择框通过<select>和<option>元素创建，HTMLSelectElement类型也提供了很多属性和方法，其中value
属性 由选中项决定，如果没有选中项返回空字符串；如果value特性未指定返回选项的文本内容，选择框的
change事件只要选中了选项就会触发
选择选项：访问选中项的方法就是使用selectedIndex属性，但是selectedIndex属性只允许选择一样
添加选项：可以使用DOM方法为文本添加节点，并设置其value属性添加到选择框中；第二种方法就是使用
Option构造函数来创建新选项，接收文本值和value值；第三种方法就是调用add()方法，接受两个参数：要添
加的新选项和将位于新选项之后的选项。
移除选项：1.使用DOM操作的removeChild()方法 2.使用选择框的remove()方法 3.将相应的值设为null
富文本编辑：富文本编辑的本质就是在页面中嵌入一个包含空HTML页面的iframe，通过设置designMode
属性为"on"值，就可以编辑文本内容了；另一种编辑富文本的方式就是使用名为contenteditable属性，这个
属性可以应用给页面中任何元素，设置了这个属性的元素就像变成了<textarea>元素一样
操作富文本：与富文本编辑器交互的主要方式就是使用document.execCommand()方法，需要传递三个参数
要执行的命令名称，false，执行命令必须的一个值；queryCommandEnabled()方法用来检测是否可以针对
当前选择的文本执行某个命令，结果返回一个布尔值；queryCommandValue()方法用于取得执行命令时传入
的值
表单域富文本：富文本编辑器中的HTML不会自动提交给服务器，需要手工提取并提交HTML，因为用我们
构建的富文本编辑器并不是一个表单字段，因此在将其内容提交给服务器之前，必须将iframe或contenteditable
元素中的HTML复制到一个表单字段中