csdn_export_md

JavaScript第十四章

• 表单的基础知识*
  • 提交表单

    可以通过按钮将其 type 特性的值设置为"submit"来提交表单,也可以通过document.getElementById(“myForm”);来提交。避免一次性提交太多表单，在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

  • 重置表单

    。使用 type 特性值为"reset"的或都可以创建重置按钮也可以通过document.getElementById(“myForm”)方法来重置;不过一般比较少用这个。

  • 表单字段

    共有的表单字段属性:disabled ,for,name,readOnly,tabIndex,type,value
    共有的表单字段方法:focus()和 blur()：focus()方法用于将浏览器的焦点设置
    到表单字段，即激活表单字段，使其可以响应键盘事件。 blur()方法的作用是从元素中移走焦点。

    共有的表单字段事件：blur：当前字段失去焦点时触发。
    change：对于和元素，在它们失去焦点且 value 值改变时触发；对于元素，在其选项改变时触发。
    focus：当前字段获得焦点时触发。

• 文本框脚本
  • <input>和<textarea>
  • 选择文本
    • 两种文本框都支持 select()方法，这个方法用于选择文本框中的所有文本。在调用 select()方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何
      时候被调用。
    • 选择（select）事件:在选择了文本框中的文本时，就会触发 select
      事件。
    • 取得选择的文本: ：selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。
    • 选择部分文本: setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似substring()方法的两个参数）。
  • 过滤输入
    • 屏蔽字符:

      器取得字符编码。然后，使
      用 String.fromCharCode()将字符编码转换成字符串，再使用正则表达式 /\d/ 来测试该字符串，从而确定用户输入的是不是数值。如果测试失败，那么就使EventUtil.preventDefault()屏蔽按键事件。

    • 操作剪贴板
  • 自动切换焦点

    tabForward()函数是实现“自动切换焦点”的关键所在。这个函数通过比较用户输入的值与文本框的 maxlength 特性，可以确定是否已经达到最大长度。

  • HTML5 约束验证API
    • 必填字段：指定required 属性，任何标注有 required 的字段，在提交表单时都不能空着。
    • 其他输入类型：type 属性"email"，“email”
    • 数值范围：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”，还有"time"。对所有这些数值类型的输入元素，可以指定 min 属性（最小的可能值）、max 属性（最大的可能值）和 step 属性（从 min 到 max 的两个刻度间的差值）。
    • 输入模式： HTML5 为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
    • 检测有效性：使用 checkValidity()方法可以检测表单中的某个字段是否有效。
    • 禁用验证：设置 novalidate 属性，可以告诉表单不进行验证。
• 选择框脚本
  • 选择选项

  对于只允许选择一项的选择框，使用选择框的 selectedIndex 属性，允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项的选择，因而可以动态选中任意多个项。

  • 添加选项

  使用 DOM 方法,创建了一个新的<option>元素，然后为它添加了一个文本节点，并设置其 value 特性，最后将它添加到了选择框中。或者使用 Option 构造函数来创建新选项。

  • 移除选项

  可以使用 DOM 的 removeChild()方法，为其传入要移除的选项。也可以使用选择框的 remove()方法。这个方法接受一个参数，即要移除选项的索引。最后一种方式，就是将相应选项设置为 null。

  • 移动和重排选项

  使用 DOM 的 appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选择框中。移动选项与移除选项有一个共同之处，即会重置每一个选项的 index 属性。

• 表单序列化

  *function serialize(form){
  var parts = [],
  field = null,
  i,
  len,
  j,
  optLen,
  option,
  optValue;
  for (i=0, len=form.elements.length; i < len; i++){
  field = form.elements[i];
  switch(field.type){
  case “select-one”:
  case “select-multiple”:
  if (field.name.length){
  for (j=0, optLen = field.options.length; j < optLen; j++){
  option = field.options[j];
  if (option.selected){
  optValue = “”;
  if (option.hasAttribute){
  optValue = (option.hasAttribute(“value”) ?
  option.value : option.text);
  } else {
  optValue = (option.attributes[“value”].specified ?
  option.value : option.text);
  }
  parts.push(encodeURIComponent(field.name) + “=” +
  encodeURIComponent(optValue));
  }
  }
  }
  break;
  case undefined: //字段集
  case “file”: //文件输入
  case “submit”: //提交按钮
  case “reset”: //重置按钮
  case “button”: //自定义按钮
  break;
  case “radio”: //单选按钮
  case “checkbox”: //复选框
  if (!field.checked){
  break;
  }
  / 执行默认操作 */
  default:
  //不包含没有名字的表单字段
  if (field.name.length){
  parts.push(encodeURIComponent(field.name) + “=” +
  encodeURIComponent(field.value));
  }
  }
  }
  return parts.join("&");
  }

• 富文本编辑

  • 在页面中嵌入一个包含空 HTML 页面的 iframe。通过设置 designMode 属性，这个空白
    的 HTML 页面可以被编辑，而编辑对象则是该页面元素的 HTML 代码。designMode 属性有两
    个可能的值：“off”（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符
    号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。

  • contenteditable属性

    contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素,它不需要 iframe、空白页和 JavaScript，只要为元素设置contenteditable 属性即可

  • 操作富文本

    document.execCommand()。这个方法可以对文档执
    行预定义的命令，而且可以应用大多数格式。可以为 document.execCommand()方法传递 3 个参数：
    要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（如果不需要值，则传递 null）。。为了确保跨浏览器的兼容性，第二个参数应该始终设置为 false，因为 Firefox 会在该参数为 true 时抛出错误。

  • 富文本选区

    使用框架（iframe）的 getSelection()方法，可以确定实际选择的文本。
    这个方法是 window 对象和 document 对象的属性，调用它会返回一个表示当前选择文本的 Selection
    对象。

  • 表单与富文本

    富文本编辑器中的 HTML 不会被自动提交给服务器，而需要我们手工来提取并提交
    HTML。为此，通常可以添加一个隐藏的表单字段，让它的值等于从 iframe 中提取出的 HTML。具体来说，就是在提交表单之前，从 iframe 中提取出 HTML，并将其插入到隐藏的字段中。

• 小结
• 可以使用一些标准或非标准的方法选择文本框中的全部或部分文本。
• 在文本框的内容变化时，可以通过侦听键盘事件以及检测插入的字符，来允许或禁止用户输入
  某些字符。
• IE、Firefox、Chrome 和 Safari 允许通过 JavaScript 访问剪贴板中的数据，而 Opera 不允许这种访
  问方式。
• 富文本编辑功能是通过一个包含空 HTML 文档的 iframe 元素来实现的。
• 富文本编辑器并不是一个表单字段，因此在将其内容提交给
  服务器之前，必须将 iframe 或 contenteditable 元素中的 HTML 复制到一个表单字段中。