表单脚本
HTML中 form 表示表单
action: 接收请求的URL
elements: 表单所有控件的集合
length：表单控件数量
method： 请求方式Get，post
name： 表单名称
submit： 表单提交
reset： 表单重置
target: 发送请求和接受响应的窗口名称
acceptCharset：服务器处理在字符集
enctype：请求编码类型
表单字段事件
blur，change，focus
文本框脚本
- input-text： 单行文本
- textarea： 多行文本
约束验证API
- 必填 required
- 类型约束 email 、url
- 数字范围 range
- 正则 pattern = "\d+"
- 检测有效性 checkValidity()
- 禁用校验 novalidate
代码序列化
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属性 contenteditable ，使这个空白的HTML页面可以编辑
操作方式
document.execCommand() 来处理文本,第二个参数始终设置false，为了浏览器的兼容
| 命令 | 值（第三个参数） | 说明 |
|---|---|---|
| backcolor | 颜色字符串 | 设置文档的背景颜色 |
| bold | null | 将选择的文本转换为粗体 |
| copy | null | 将选择的文本复制到剪贴板 |
| createlink | URL字符串 | 将选择的文本转换成一个链接，指向指定的URL |
| delete | null | 删除选择的文本 |
| cut | null | 将选择的文本剪切到剪贴板 |
| fontname | 字体名称 | 将选择的文本修改为指定字体 |
| fontsize | 1～7 | 将选择的文本修改为指定字体大小 |
| forecolor | 颜色字符串 | 将选择的文本修改为指定的颜色 |
| formatblock | 要包围当前文本块的 | 使用指定HTML标签来格式化选择的文本块 |
| indent | null | 缩进文本 |
| inserthorizontalrule | null | 在插入字符处插入一个<hr>元素 |
| insertorderedlist | null | 在插入字符处插入一个<ol>元素 |
| insertimage | 图像的URL | 在插入字符处插入一个图像 |
| insertunorderedlist | null | 在插入字符处插入一个<ul>元素 |
| insertparagraph | null | 在插入字符处插入一个<p>元素 |
| italic | null | 将选择的文本转换成斜体 |
| justifycenter | null | 将插入光标所在文本块居中对齐 |
| justifyleft | null | 将插入光标所在文本块左对齐 |
| outdent | null | 凸排文本（减少缩进） |
| paste | null | 将剪贴板中的文本粘贴到选择的文本 |
| removeformat | null | 移除插入光标所在文本块的块级格式。这是撤销formatblock命令的操作 |
| selectall | null | 选择文档中的所有文本 |
| underline | null | 为选择的文本添加下划线 |
| unlink | null | 移除文本的链接。这是撤销createlink命令的操作 |