Javascript基础系列(十三)-表单

表单脚本

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命令的操作
posted @ 2020-04-20 09:28  pengsn  阅读(177)  评论(0编辑  收藏  举报