表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而与其它HTML元素具有相同的默认属性.不过HTMLFormElement也有下列独有的属性和方法. acceptCharset:服务器能够处理的字符集:等价于HTML中的accept-charset特性. action:接受请求的URL:等价于HTML中的action特性. elements:表单中所有控件的…

富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 Selection 对象 selection 对象拥有下列属性: anchorNode: 选区起点所在节点 anchorOffset:选区起点在其所在节点中的偏移量 focusNode:选区终点所在节点 focusOffest:选区终点在其所在节点中的偏移量 isCollapsed:布尔值,表示选…

表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集合,该集合是一个有序列表,包含着所有的表单字段 这些元素在该集合中出现的顺序,与在文档中出现的顺序一致 在该集合中可以使用 name 和 在文档中的顺序 来对其中的元素进行索引 若有多个表单元素拥有相同的 Name,那么将会返回一个 nodelist 集合 以下方的HTML代码片段为例: <form…

表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足以下几点要求: 对表单字段和值进行 url 编码,使用 & 符号分割 不发送表单的禁用字段 只发送勾选的复选框和单选按钮 不发送 type 为 "reset" 和 "button" 的按钮 多项选择为每一个选中的项单独一个条目 在点击提交按钮提交的情况下,也会发…

自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text" name="tel1" id="txtTel1" maxlength="3"> <input type="text" name="tel2" id="txtTel2"…

在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 屏蔽字符 有时候我们需要用户的输入不包含某些字符 所以我们可以通过阻止 Keypress 事件的默认事件来完成屏蔽字符的功能 以如下代码为例,可以实现一个只能输入数字的文本框 var textbox = document.getElementById("myInput"); text.a…

表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成,例如上传文件等 表单的提交一般来说是通过图像按钮,或者提交按钮来实现的 提交按钮既可以是 input 元素 也可以是 button 元素,如下所示: <!--通用提交按钮--> <input type = "submit" value = "Submit For…

表单 JS最初的一个用途就是帮助服务器分担处理表单的责任 时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用自定义的组件来完成表单的功能,这就需要我们对表单有一个较为详细的了解. 表单基础 在HTML中,表单是由 <form> 元素表示的,在JS中表单则对应了 HTMLFormElement 类型 该类型继承自 HTMLElement ,因此表单拥有与其它HTML元素相同的默认属性 不过表单也有自己独有…

键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发 keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发) keyup:用户释放按键触发 所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用 文本事件只有一个就是 textInput 事件 该…

事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同名的HTML特性来指定 这个特性的值应该是能够执行的script代码 如: <input type="button" value="click me" onclick="alert('clicked')"/> 此外也可以直接调用在文档其它…