萌萌哒的作者
萌萌哒的作者

表单脚本

表单的基础知识

  • HTMLFormElement有自己独特的属性和方法
  • acceptCharset，服务器能够处理的字符集，等价于HTML中的accept-charset特性
  • action，接受请求的URL，等价于HTML中的action特性
  • elements，表单中所有控件的集合
    enctype，请求的编码类型，等价于HTML中的 enctype特性
  • length，表单中控件的数量
  • method，要发送的HTTP请求类型，通常是"get"或"post"，等价于HTML的method特性
  • name，表单的名称，等价于HTML的name特性
  • reset()，将所有表单域重置为默认值
  • submit()，提交表单
  • target()，用于发送请求和接收响应的窗口名称，等级与HTML的target特性

提交表单

  • 用户单击提交按钮或者图像按钮时，就会提交表单，使用“input”或“button”都可以自定义提交按钮，只要将type特性的值设置为"submit"即可

  • 提交表单时，可能出现最大的问题就是重复提交表单，在第一次提交表单之后，如果长时间没有反应，用户可能会反复单击提交按钮。解决办法两个，第一次提交之后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作

重置表单

  • 在用户单击重置按钮时，表单会被重置，使用type特性值为reset的“input”或“button”都可以创建重置按钮

表单字段

  • 表单字段公有的属性

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

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

  • name，当前字段的名称

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

  • tabIndex，表示当前字段的切换序号

  • type，当前字段类型，如CheckBox

  • value当前字段将被提交给服务器的值

  • 公有的表单字段方法

  • 每个表单都有两个方法，focus()和blur()，其中focus()方法用于将浏览器的焦点设置到表单字段，即激活字段，使其可以响应键盘事件。在调用blur方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走

  • 公有的表单字段事件

  • blur，当前字段失去焦点时触发

  • change，对于input和textarea元素，在失去焦点且value值改变时触发，对于select元素，在选择选项时触发

  • focus，当前字段获得焦点时触发

文本框脚本

  • 两种方式来表示文本框，input和textarea

选择文本

  • 两种文本框都支持select()方法，与select()方法对应的是一个select事件，选择文本框中的文本时，就会触发select事件
  • 添加两个属性：selectionStart和selectionEnd，保存的是基于0的数值，表示选择文本的范围
  • 所有文本框都有一个setSelectionRange()方法，接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

过滤输入

  • 剪切板事件
  • beforecopy，在发生复制操作前触发
  • copy，在发生复制操作时触发
  • beforecut，在发生剪切操作前触发
  • cut，在发生剪切操作时触发
  • beforepaste，在发生粘贴操作前触发
  • paste，在发生粘贴操作时触发

表单序列化

  • 浏览器将数据发送给服务器
  • 对表单字段的名称和值进行URL编码，使用&符分隔
  • 不发送禁用的表单字段
  • 只发送勾选的复选框和单选按钮
  • 不发送type为"reset"和"button"的按钮
  • 多选选择框中的每个选中的值单独一个条目
  • 在单击提交按钮提交表单的情况下，也会发送提交按钮，否则不发送提交按钮，也包括type为"image"的元素