基础知识
<form>
元素HTMLFormElment元素继承了HTMLElment。
自己独特的属性和方法:
acceptCharset
action
提交表单submit
重置表单 reset
表单字段,elments属性
属性
disabled
form
name
readOnly
tabIndex
type
value
方法:
focus()
blur()
属性:
html5 autofocus属性
表单支持的事件
blur
change
focus
文本框脚本
<input>
元素的单行文本框 size特征,可以指定文本框中能够显示的字符数。value特征,可以设置文本框的初始值,maxlength特征用于指定文本框中的可接受的最大字符数。rows和cols特征指定大小。<textarea>
元素的多行文本框。- value中保存着读取或设置的文本框的值。
- 最好不使用DOM方法
选择文本
方法:
select()
对应一个select事件,在选择了文本框中的文本时,就会出发select事件
取得选择的文本
属性:
selectionStart和selectionEnd
选择部分文本框
setSelectionRange()方法
过滤文本
- 阻止keypress的默认行为
- 操作剪贴板
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
选择选项
- 对于只允许现在一项的选择框,选中项使用slectedIndex属性
可以获取或修改选择的项 可以通过slected=true来现在某一项。
运行多选的选择框 selected属性,
- getSelectedOptions
添加选项
- 使用DOM方式
- 使用Option构造函数来创建新选项。Option(text,value(可选))
- 使用选择框的add()方法。
- insertBefor()方法
移除选项
- 使用DOM方法removeChild()
- 使用选择框的remove()方法
- 将选择值设置为null
移动重排选择
使用DOM的appendChild()方法
inertBefore()
appendChild()
单刀赴会家分店
表达序列化
表达发送给服务器过程:
- 对表达字段的名称和值进行URL编码,使用和号&分割
- 不发送禁用的表达字段
- 只发送勾选的复选框和单选框
- 不发送type为reset和botton的按钮
- 多选选择框的每个选中的值单独一个条目
- 在单击提交按钮提交表单的情况下,也会发送提交按钮,否则不发送提交按钮。
<select>
元素的值,就是选中的<option>
元素的value特性的值。如果<option>
元素没有value特性,则是<option>
元素的文本值。
富文本编辑
- iframe
- contnteditable属性
操作富文本
document.execCommand()