javascript基础学习系列三百一十一：单选按钮和复选框

完美句号

已于 2024-01-29 09:48:56 修改

阅读量437

点赞数 3

文章标签： javascript 学习开发语言前端原型模式系统架构架构

于 2024-01-29 09:48:24 首次发布

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135905379

版权

本文详细描述了JavaScript中的serialize函数，用于处理表单数据序列化，以及如何实现富文本编辑器的WYSIWYG功能，包括使用designMode属性和iframe技术。

摘要由CSDN通过智能技术生成

这个 serialize()函数一开始定义了一个名为 parts 的数组，用于保存要创建字符串的各个部分。接下来通过 for 循环迭代每个表单字段，将字段保存在 field 变量中。获得一个字段的引用后，再通过 switch 语句检测其 type 属性。最麻烦的是序列化元素，包括单选和多选两种模式。在遍历选择框的每个选项时，只要有选项被选中，就将其添加到结果字符串。单选控件只会有一个选项被选中，多选控件则可能有零或多个选项被选中。

同样的代码适用于两种选择类型，因为浏览器会限制可选项的数量。找到选中项时，需要确定使用哪个值。如果不存在 value 属性，则应该以选项文本代替，不过 value 属性为空字符串是完全有效的。为此需要使用 DOM 合规的浏览器支持的 hasAttribute()
方法，而在 IE8 及更早版本中要使用值的 specified 属性。表单中如果有元素，它就会出现在元素集合中，但应该没有 type 属性。因此，如果
type 属性是 undefined，则不必纳入序列化。各种类型的按钮以及文件输入字段也是如此。(文件输入字段在提交表单时包含文件的内容，但这些字段通常无法转换，因而也要排除在序列化之外。)

对于单选按钮和复选框，会检测其 checked 属性。如果值为 false 就退出 switch 语句;如果值为 true，则继续执行 default 分支，将字段的名和值编码后添加到 parts 数组。注意，所有没有名字的表单字段都不会包含在序列化结果中以模拟浏览器的表单提交行为。这个函数的最后一步是使用 join()通过和号把所有字段的名值对拼接起来。
serialize()函数返回的结果是查询字符串格式。如果想要返回其他格式，修改起来也很简单。

在网页上编写富文本内容是 Web 应用开发中很常见的需求。富文本编辑也就是所谓的“所见即所得”(WYSIWYG，What You See Is What You Get)编辑。虽然没有规范定义，但源自 IE 的一套事实标准已经被 Opera、Safari、Chrome 和 Firefox 所支持。基本的技术就是在空白 HTML 文件中嵌入一个 iframe。通过 designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素
的 HTML。designMode 属性有两个可能的值:“off”(默认值)和"on"。设置为"on"时，整个文档都会变成可以编辑的(显示插入光标)，从而可以像使用文字处理程序一样编辑文本，通过键盘将文本标记为粗体、斜体，等等。
作为 iframe 源的是一个非常简单的空白 HTML 页面。下面是一个例子:

<!DOCTYPE html>
<html>
  <head>
    <title>Blank Page for Rich Text Editing</title>
  </head>
  <body>
  </body>
</html>

这个页面会像其他任何页面一样加载到 iframe 里。为了可以编辑，必须将文档的 designMode 属性设置为"on"。不过，只有在文档完全加载之后才可以设置。在这个包含页面内，需要使用 onload 事件处理程序在适当时机设置 designMode，如下面的例子所示:

 <iframe name="richedit" style="height: 100px; width: 100px"></iframe>
<script>
  window.addEventListener("load", () => {
    frames["richedit"].document.designMode = "on";
  });
</script>