十四章 表单脚本

第十四章 表单脚本

表单的基础知识

基础知识

  • 在javascript中，表单对应的是 HTMLForm-Element类型，HTMLFormElement继承自HTMLElement。在其他元素属性之外还包含独有属性和方法。

    • acceptCharset: 服务器能够处理的字符集；等价于HTML中的accept-charset特性。
    • action::接收请求的URL；等价于HTML中的action特性。
    • elements: 表单中所有控制的集合(HTMLCollection)。
    • enctype: 请求的编码类型；等价于HTML中的enctype特性。
    • length:表单中控件的数量。
    • method:要发送HTTP请求类型，等价于HTML中的method特性。
    • name:表单的名称；等价于HTML的name特性
    • reset():将所有表单域重置为默认值。
    • submit():提交表单。
    • target:用于发送请求和接收响应的窗口名称；等价于HTML的target特性。

  • document.forms:含有页面所有表单的数组。

    • 可以通过索引访问如果表单含有name，也可以使用对象取值的形式通过name获取表单的数据。

      • <body>
    <form name="test1">
        <input type="text">
    </form>
    <form name="test2">
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
</body>
<script>
    let formDom = document.forms
    console.log(formDom['test1'] === formDom[0]) // true
</script>

      • 取值方式document.forms[index] ||document.forms[form-name]

提交表单
  • submit()方法
    • 将表单数据发送至服务器
    • <input type='submit'> || <button type='submit'>都可以提交表单，浏览器会在将请求发送之前触发submit，所以通过dom元素提交表单我们可以在submit事件中做预处理。
    • 但通过js中document.forms[0].submit()此时不会触发submit事件，所以我们需要在使用之前做预处理。
  • 阻止默认事件
    • 在submit事件中通过event时间对象可以阻止默认行为event.preventDefault()
重置表单
  • reset()方法
    • 将该表单所有表单域重置为默认值。
    • 与submit类似将input || button元素的type = "reset"后使用。
    • 不同点在于不论是dom元素 || js操作reset()方法都会触发reset事件。
表单元素字段

  • 访问表单中的元素,首先获取dom,或可以从document.forms中选取某个表单，接着可以访问此表单中的elements属性，该属性中包含表单内的所有元素。

  • 共有的表单字段属性

    • 除了<fieldset>元素外

    • disabled:布尔值，表示当前字段是否被禁用。

    • form:指向当前字段所属表单的指针；只读。

    • name:当前字段的名称。

    • readOnly:布尔值，表示当前字段是否只读。

    • tabIndex:表示当前字段的切换tab序号。

    • type:当前字段类型，如checkbox/radio

    • value:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

    • 避免重复提交

      • 可以在一次提交后，给元素设置disabled属性。
      • 需要注意的是onclick在点击事件中如果阻止了默认事件，由于不同浏览器的触发时差问题，click有可能会在submit事件前触发。这样将不会在触发submit导致提交不成功。

  • 共有的表单字段方法

    • foucs():获取焦点

    • blur():失去焦点

    • H5新增字段

      • autofocus 自动获取焦点

      • <input type="text" autofocus>

      • 对于非表单元素，如果将其tabIndex属性设置为-1,然后在调用focus()方法，也可以让这些元素获取焦点。

  • 共有的表单字段事件

    • blur:失去焦点时触发。
    • change:对于<input> || <textarea>元素，在他们失去焦点并且value值改变时触发。<select>选项改变时触发。
    • focus:获取焦点时触发。

文本框脚本

基础知识
  • <input>
    • size:字段控制输入框显示多少个字符
    • value:字段设置初始值
    • maxlength:字段设置最大字符数
  • <textarea>
    • rows:字段指定文本框字符行数，
    • cols:指定文本框的字符列数
    • 初始值:写在文本框标签中
选择文本

  • 上述两种文本框都支持select()方法，用于选择文本框中的所有文本。

  • 选择select事件

    • 用户选中文本，和调用select()方法会触发select事件。

  • 取消选择文本

    • H5新增
    • selectionStart & selectionEnd表示用户选择文本的起始和结束索引。

  • 选择部分文本

    • H5新增
      • setSelectionRange()方法接收两个参数，起始和结束索引。
      • 在使用setSelectionRange()方法的时候，需要获取焦点。
    • IE8以及更早版本
      • createTextRange()方法创建一个范围，并将其放在恰当的位置上，在使用moveStart()和moveEnd()这两个范围方法将范围移动到位。在调用这两个方法之前，还必须使用collapse()方法将范围折叠到文本框的开始位置。此时moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本。
过滤输入

  • 通过正则表达式匹配需要屏蔽的字符，然后使用event.preventDefault(event)取消默认事件的形式可进行屏蔽。

  • 操作剪贴板

    • H5新增最早有IE支持
    • beforecopy || beforecut || beforepaste针对文本框的上下文菜单（预期将发生剪贴板事件）的情况下触发
    • copy || cut || paste在上下文菜单选择，或触发键盘组合按键时，所有浏览器都会触发他们。
    • beforecopy:复制操作前触发
    • copy:复制操作时触发
    • beforecut:剪切操作前触发
    • cut:剪切操作触发
    • beforepaste:粘贴操作前触发
    • paste:粘贴操作触发
    • clipboardData:
      • IE中存放在window中
      • 其他存放在剪切事件对象event中
      • getData():获取剪切板数据
        • 接收一个参数MIME(text/plain) || URL
      • setData():设置剪切板数据
        • 接收两个参数
          • MIME(text/plain) || URL
          • 要设置的数据字符串
          • 返回值true || false
自动切换焦点
  • 首先要知道用户已经输入完毕，然后拿到下一个表单元素调用focus()
HTML5约束验证API

  • required:必填字段

  • 其他输入类型:type=email & type=url

  • 数值范围:number || range || datetime || datetime-local || date || month || week || time || min || max || setp

    • input.setpUp():加法，接收一个参数 数值，修改当前值，不传默认 +1
    • input.setpDown():减法，接收一个参数 数值，修改当前值，不传默认-1

  • 输入模式

    • H5新增
      • pattern:这个属性值为一个正则表达式，进行约束输入内容

  • 检测有效

    • checkValidity():检查表单中某个元素是否有效
    • 返回值Boolean
    • 如果需要检测整个表单
      • doucment.forms[0].checkValidity()
    • 属性：无效原因
      • customError:如果设置了setCustomValidity()则返回true
      • patternMisMatch:输入值与pattern的正则表达式不匹配则返回true
      • rangeOverflow:如果值比max大,则返回true
      • rangeUnderflow:如果值比min小,则返回true
      • stepMisMatch:如果min 和 max之间的步长值不合理，返回true
      • toolong:长度超过maxlength返回true
      • typeMismatch:不符合mail || url要求的格式，返回true
      • valid:如果其他值都为false，则返回true
      • valueMissing:标注为required的值为空，则返回true

  • 禁止校验

    • novalidate:强制表单不校验

      • <form mothod="post" action="text.php" novalidate></form>

    • formnovalidate:指定了属性的type = "submit"的元素，阻止触发校验

选择框脚本

基础知识
  • 选择框时通过<select>|| <option>元素创建的，HTMLSelectElement类型还提供了下列属性和方法
  • add(newOption, relOption):向控件插入新<option>元素，其位置在相关项relOption之前
  • multiple:布尔值，表示是否支持多项选择;等价于HTML中的multiple特性
  • options:控件中所有<option>元素的HTMLCollection
  • remove(index):移除给定位置的选项
  • selectedIndex:基于0的选中项索引，没有选中项则为-1,对于支持多选的控件，只保存选中项中第一项的索引。
  • size:选择框中可见的行数。
  • value属性 规则如下
    • 如果没有选中项，则value为空字符串
    • 如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。
    • 如果有一个选中项，但该项的value特性在HTML中未指定，则选择框的value属性等于该项的文本。
    • 如果有多个选中项，则选择框的value属性将依据前两条规则取得第一个选中项的值。
  • <option>
    • HTMLOptionElement对象
      • index:当前选项在options集合中的索引
      • label:当前选项的标签；等价于HTML中的label特性
      • selected:布尔值，表示当前选项是否被选中。将这个属性设置为true,可以选中当前选项。
      • text:选项的文本
      • value:选项的值
    • change:事件
      • 选中选项时触发，不同于其他表单元素被修改且失去焦点后触发
选择选项

  • 获取某一项的引用，然后将其selected属性设置为true

  • select['要修改的选择框dom'].options[索引].selected = true
添加选项
  • 通过创建<option>元素添加至<select>元素中
    • let ops = document.createElement('option')
    • selectDom.appendChild(ops)
  • 通过Option构造函数创建<option>元素
    • let ops = new Option('Option text', 'Option value')
    • selectDom.appendChild(ops)
  • 通过<select>的add()方法添加 推荐
    • let ops = new Option('Option text', 'Option value')
    • selectDom.add(ops, undefined)
      • 第二个参数传入undefined兼容所有浏览器，并添加至<select>中的末尾
移除选项
  • 通过dom0级移除
    • selectDom.removeChild(selectDom.options[0])
  • 通过<select>的remove()方法移除
    • selectDOm.remove(0)
  • 通过将option对象赋值为null
    • 在dom出现之前的使用方式
    • selectDom.options[0] = null
移动和重排选项
  • 最适合的方法appendChild || insertBefore
  • 规则
    • 当传入已存在的元素时，会先从父节点中移除该元素。在把他添加到指定的位置
    • 移动和移除选项会重置每一个选项的index属性

表单序列化

基础知识
  • 浏览器向服务器发送表单数据流程
    • 对表单字段的名称和值进行URL编码，使用和号&分隔
    • 不发送禁用的表单字段
    • 只发送勾选的复选框和单选按钮
    • 不发送type为reset || button的按钮
    • 多选选择框中的每个选中的值单独一个条目
    • 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为image的<input>元素
    • <select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。
  • <fieldset> 不需要参与序列化，而且它也没有type属性
  • DOM使用hasAttribute()方法检测vaule是否存在
  • IE使用specified属性检测value是否存在

富文本编辑

基础知识
  • 这一技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>元素的HTML代码。designMode属性有两个可能的值off 默认值 || on。在设置为on时，整个文档都会变成可以编辑（显示插入符号）。
    • 在页面完全加载后才能设置designMode属性。
使用contenteditable属性`

  • 可以在元素中直接设置

    • <div contenteditable></div>
<!-- 可以将任何元素开启可编辑模式 -->

  • 通过dom操作设置

    • let div = document.getElementById('editor')
    • div.contenteditable = true
操作富文本
  • 富文本主要的交互方式，是使用document.execCommand()
    • 传递三个参数
      • 要执行的命令名称
      • 表示浏览器是否应该为当前命令提供用户界面的一个布尔值
        • 为了兼容浏览器此参数应该始终传入false
      • 执行命令必须的一个值，默认为null
富文本选区
  • 此处介绍大量API以及属性 详细请参照Page439 - 441
表单与富文本

  • 此处介绍大量API以及属性 详细请参照Page441 - 443

  • 基础知识

    • 由于富文本不属于表单字段，所以在提交时应该单独获取数据
    • frams[富文本名称].document.body.innerHTML
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 表单脚本
    本章主要介绍：表单、文本框验证与交互、使用其他表单控制。这一章会继续沿用上一章 封装的 EventUtil 对象(...
    了凡和纤风阅读 2,773评论 0赞 0
  • JavaScript基础知识总结——表单脚本
    表单基础知识 在HTML中，表单是使用form元素来表示的，JS中对应的是HTMLFormElement类型。它同...
    More_5897阅读 2,801评论 0赞 1
  • 第十四章 表单脚本
    1.有的浏览器会在触发表单的submit事件之前触发click事件，而有的浏览器则相反。对于先触发click事件的...
    张果果阅读 1,229评论 0赞 0
  • 表单脚本
    表单的基础知识 文本框脚本 选择框脚本 表单序列化 富文本编辑 表单的基础知识 用户单击提交按钮或图像按钮时，就会...
    jluemmmm阅读 1,666评论 0赞 0
  • 表单脚本
    表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset，服务器能够处理的...
    萌萌哒的作者阅读 1,427评论 0赞 0

友情链接更多精彩内容