JS13--表单脚本

基础知识

<form>元素HTMLFormElment元素继承了HTMLElment。
自己独特的属性和方法:

acceptCharset
action

提交表单submit

重置表单 reset

表单字段,elments属性

属性
disabled
form
name
readOnly
tabIndex
type
value

方法:
focus()
blur()
属性:
html5 autofocus属性

表单支持的事件
blur
change
focus

文本框脚本

  1. <input>元素的单行文本框 size特征,可以指定文本框中能够显示的字符数。value特征,可以设置文本框的初始值,maxlength特征用于指定文本框中的可接受的最大字符数。rows和cols特征指定大小。
  2. <textarea>元素的多行文本框。
  3. value中保存着读取或设置的文本框的值。
  4. 最好不使用DOM方法

选择文本

方法:
select()
对应一个select事件,在选择了文本框中的文本时,就会出发select事件

取得选择的文本

属性:
selectionStart和selectionEnd

选择部分文本框

setSelectionRange()方法

过滤文本

  1. 阻止keypress的默认行为
  2. 操作剪贴板
    6个事件:
    beforecopy
    copy
    beforecut
    cut
    beforepaste
    paste

访问剪贴板的数据:

使用clipboardData对象
getData()
setData()
clearData()

getClipboardText()
setClopboardText()   

自动切换焦点

tabForword() 比较maxlength特性

html5约束

必填字段

required属性

其它输入类型

type="email"
type="url"
number
range
datatime
datetime-local
date
month
week
time
min
max
step

stepUp()
stepDown()

输入模式

pattern=""

检测有效性 ##

checkValidity()根据前面的约束
validity属性 告诉为什么有效或无效

禁用验证

novalidatae属性
formnovaliddate属性

选择框脚本

<select>
<option>
选择框的value属性由当前相中项决定
在DOM中每个<option>元素都有一个HTMLOptionElement对象表示。
index
label
selected    
text 选项的文本
value 选项的值

change只有再选中了选择就会触发。

支持的方法:

add(newOption,relOption)
multiple
options
remove(index)
selectedindex
size

选择选项

  1. 对于只允许现在一项的选择框,选中项使用slectedIndex属性
    可以获取或修改选择的项
  2. 可以通过slected=true来现在某一项。

  3. 运行多选的选择框 selected属性,

  4. getSelectedOptions

添加选项

  1. 使用DOM方式
  2. 使用Option构造函数来创建新选项。Option(text,value(可选))
  3. 使用选择框的add()方法。
  4. insertBefor()方法

移除选项

  1. 使用DOM方法removeChild()
  2. 使用选择框的remove()方法
  3. 将选择值设置为null

移动重排选择

使用DOM的appendChild()方法
inertBefore()
appendChild()

单刀赴会家分店

表达序列化

表达发送给服务器过程:

  1. 对表达字段的名称和值进行URL编码,使用和号&分割
  2. 不发送禁用的表达字段
  3. 只发送勾选的复选框和单选框
  4. 不发送type为reset和botton的按钮
  5. 多选选择框的每个选中的值单独一个条目
  6. 在单击提交按钮提交表单的情况下,也会发送提交按钮,否则不发送提交按钮。
  7. <select>元素的值,就是选中的<option>元素的value特性的值。如果<option>元素没有value特性,则是<option>元素的文本值。

富文本编辑

  1. iframe
  2. contnteditable属性

操作富文本

document.execCommand()

文章目录
  1. 1. 基础知识
    1. 1.1. 提交表单submit
    2. 1.2. 重置表单 reset
    3. 1.3. 表单字段,elments属性
  2. 2. 文本框脚本
    1. 2.1. 选择文本
    2. 2.2. 取得选择的文本
    3. 2.3. 选择部分文本框
    4. 2.4. 过滤文本
    5. 2.5. 自动切换焦点
    6. 2.6. html5约束
      1. 2.6.1. 必填字段
      2. 2.6.2. 其它输入类型
      3. 2.6.3. 输入模式
      4. 2.6.4. 检测有效性 ##
      5. 2.6.5. 禁用验证
  3. 3. 选择框脚本
    1. 3.1. 选择选项
    2. 3.2. 添加选项
    3. 3.3. 移除选项
    4. 3.4. 移动重排选择
  4. 4. 表达序列化
  5. 5. 富文本编辑
    1. 5.1. 操作富文本
,