《JavaScript高级程序设计》Chapter 14 表单脚本

Posted 2020-10-13 idealllllidiottttt

之前就提到了，JS创建之初是为了减少服务器的压力，而当时这个压力主要体现在表单的验证上。与此同时，JS还为WEB表单增加了一些行为。

• 表单基础知识 go
• 文本框脚本 go
• 选择框脚本 go
• 表单序列化 go
• 富文本编辑 go

JS表单基础知识

• JS中获取表单元素（<form>）的方法：

1. 通过id（所有元素通用）getElementById("");
2. 通过document.form：document.forms[0] 或者 document.forms["formName"]，其中formName指的是该表单元素的name属性值。

• 注意到表单的name属性和id不一定相同，前者常用于捆绑表单域
• JS的htmlFormElement对象对应于HTML中的<form>元素，在继承了HTMLElement的属性和方法的同时，可以调用HTML对应的属性（如acceptCharaset、action、enctype、method、name、action、target等），同时又有一些其他的方法和属性（如length、elements、reset()、submit()等)
• 提交表单：
  • HTML中的提交，<input>或者<button>的type为submit值，或者<input>的type是image（即图像按钮）
  • JS中可以调用submit()方法，不过这种方法不会激发submit事件。
  • 在激发了submit事件的情况下，可以做一系列的操作（如阻止默认行为），最重要的是，考虑到重复提交的情况，可以在触发了submit事件后禁止这个按钮或者解绑提交事件。
  • 需要注意的是submit事件和click事件有时差，不能确定提交和点击这两个事件的先后顺序，所以最好使用submit处理提交事件。
• 重置表单
  • HTML中，将<input>或者<button>的type设置为reset
  • JS中调用reset()方法。
  • 这两种方法都可以触发reset事件。
  • 注意：重置就表示所填写的所有表单信息都恢复到初始值，一般比起重置，更喜欢“取消”行为，即回到前一个页面，而不是重置所有值。
• 表单字段（form中具体的某一种表单类型的元素）
  • 访问：除了用DOM方法访问之外，还可以通过<form>的elements元素进行访问（结合索引或者元素的name属性值）。
  • 通过name属性值，若多个表单控件name值相同，会返回NodeList，而若是用索引，则只会返回其中一项。
  • 共有的表单字段属性：所有表单类型的元素通用的属性。disabled/form/name/readOnly/tabIndex/type/value。除了form属性之外，其他属性都可以进行动态修改。注意到若disabled=true，则禁用此表单项。
  • 共有的表单字段方法：focus()/blur()。HTML5中的autofocus属性。
  • 共有的表单字段事件：blur、focus、change。对于change，在不同的表单控件中触发的次数有不同，在input或者textarea中，当失去焦点且value值改变时触发；在select中，只要选项改变就触发。
• 总的来说，表单的一些属性和方法或者事件的操作方法还是很符合现实的逻辑的。可以在应用中慢慢领悟。

文本框脚本

• <input type="text">或者<textarea>都可以指定为文本框。
  • 有差异：前者基本为当行输入文本框，可以指定size、value和maxlength等属性。后者表现为多行文本框，可以指定rows和cols等属性，且初始值放在<textarea>和</textarea>之间，并不能指定最大字符数。
  • 相同：输入的内容都和保存在value属性中。建议还是使用value属性来设置或者获取文本框的文本，而不是使用DOM方法（如setAttribute）,后者作出的修改不一定会反应在DOM中。
• 选择文本
  • select()：不用参数，焦点一般会设置在文本框中。在实际的操作之中，一般会让文本框获得焦点时选择所有文本。
  • select事件。触发select事件的时刻因浏览器而异。调用select()方法的时候也会触发select事件。
  • 取得选择的文本：
    • HTML5中selectionStart和selectionEnd，可以结合substring()使用。
    • IE8及之前的版本：document.selection.createRange().text
  • 选择部分文本：
    • HTML5中setSelectionRange()。传入两个表示开始和结束位置的索引（与substring()的类似，后一个索引是结束位置的下一个索引）。
    • IE8及之前的版本，需要和范围联合使用：首先，用collapse()将范围折叠刀文本框开始的位置，再向moveEnd()传入想要选择的字符数目，最后用范围的select()选择文本。如下：
      textbox.value = "Hello world";
      var range = textbox.createTextRange();
      range.collapse(true);
      range.moveStart("character",0);
      range.moveEnd("character", textbox.value.length);//"Hello world"
      range.select();
    • 要看到选择的文本，必须在选择了之后立即将焦点设置到文本框。其实也是很符合现实逻辑的。
    • 可以凭借上述差异实现跨浏览器编程。
  • 过滤输入（输入特定数据或者特定格式的数据）
    • 屏蔽字符，一般和正则表达式结合使用，并由于是字符输入阶段考虑和keypress事件绑定，同时要注意不要屏蔽了不该屏蔽的键。书中此处以输入数值为例子。见PDF P442-P443。
    • 操作剪贴板：有一些剪贴板事件。不同浏览器中有一些差异，并且并不是所有浏览器都支持。一般用于确粘贴到文本框中的文本符合某些要求，对粘贴过来的字符进行检测（paste）。
    • 自动切换焦点：一般应用场景：在用户填写完当前字段时，自动将焦点切换到下一个字段。书中举了个例子。见PDF P446。
    • HTML5约束验证API：HTML5增加了一些对表单的简单的验证的操作，靠浏览器就可以完成的一些简单验证。但目前增加的这些操作并不具备完善的跨浏览器特性，需要注意。

选择框脚本

• HTML中的<select>元素和<option>元素
  • HTMLSelectElement具有一些特有的属性和方法。这些都很好理解。但注意value属性的处理，value属性一般由当前选中的项决定（若没有，则为null）；且优先显示元素的value属性的值（即使这个属性存在却为“”），若这个属性不存在，才考虑该项的文本值。
  • HTMLOptionElement同样有一些特有的属性和方法，同样好理解。
  • 注意，在涉及到表单的操作的时候，一般不用常规的DOM功能访问信息，因为会因浏览器而异，且比起专有的方法来说，更加的麻烦。
• 选择选项：
  • 第一种方法：调用selectedIndex属性确定选中的值的索引
  • 第二种方法：考虑元素的selected值，看看是true还是false。这个方法常用于确认用户是否选中某项。
• 添加选项：
  • DOM方法：创建<option>元素，确认其文本值，value属性和值等，最后appendChild()添加
  • 用Option构造函数，传入两个参数：文本和value，第二个参数可选。虽然创建的是一个Object实例，但DOM会返回一个option元素，仍然可以用appendChild()处理。
  • 用选择框的add()方法，接受两个参数，要添加的新选项和将位于新选项之后的项。注意到IE不要求第二个参数，而DOM的却要求，所以若想在跨浏览器中实现将新项插入到选项列表最后的操作，可以将第二参数设为undefined。
• 移除选项：
  • DOM方法：removeChild()
  • 选择框的remove()方法
  • 设为null的方法：将相应选项设置为null
• 移动和重排：这里使用DOM的方法倒是最为便利的了。
  • 移动appendChild()
  • 重排：insertBefore()

表单序列化

• 主要用于提交表单中的有用信息，在Ajax中常用。有一些规则，根据这些规则编写序列化函数serialize(form)如PDF P455页，比较麻烦的就是处理option，应为既可能是多选也可能是单选。

富文本编辑（WYSIWYG，所见即所得）

• 虽然没有规范，但已经是事实标准（IE引领）
• 一种方法：通过包含空HTML文档的iframe元素实现。iframe的designMode属性设置为"on"，设置为可编辑区域。
  • 注意，designMode属性只有在加载完成之后才能设置，所以需要配合onload事件处理程序。
• 另一种方法：contenteditable属性。可以应用在任何元素中，使该元素可以立即被编辑。
  • 不需要框架、空白页和JS
  • "true"/"false"/"inherit"
• 操作富文本：document.execCommand()，三个参数：执行的命令名称、false、执行命令所需要的值。具体命令很多，可以通过查表得到。
  • 有些命令有浏览器差异性。不能指望富文本编辑器会产生统一的HTML
  • 适用于上述的两种方法。只要修改引用对象即可。
  • queryCommandEnabled()：命令能否应用。（和命令是否已经被应用差异很大）
  • queryCommandState()：命令是否已经应用。
  • queryCommandValue():应用于命令的值。document.execCommand()的第三个参数。
• 富文本选取。
  • 使用框架的getSelection()方法，确定实际选择的文本。
  • 返回Selection对象，具有一些方法，通常利用DOM范围来管理选区，进行更加细化的控制。
• 表单与富文本
  • 富文本利用iframe而非表单，所以提交的时候需要将富文本区域的值取出，在赋予一个表单字段，从而实现提交的操作。这个比较好理解。