1. 表单form
<form method="get" action="index.php" formnovalidate>
名字:<input type="text" name="uname" value="name" required><br>
電話:<input type="number" name="tel" value="18912345678" required><br>
鏈接:<input type="url" name="url" value="http://www.baidu.com" required novalidate><br>
計數:<input type="text" pattern="\d{2,5}" name="count"><br>
女<input type="radio" name="sex" value="1">
男<input type="radio" name="sex" value="2"><br>
睡覺<input type="checkbox" name="like" value="1">
看書<input type="checkbox" name="like" value="2">
玩手機<input type="checkbox" name="like" value="3"><br>
<input type="file" name="photo"><br>
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">遼寧</option>
</select><br>
<textarea name="detail" id="detail" cols="30" rows="10">請填寫...</textarea><br>
<button type="submit">submit</button>
</form>
<iframe name='richedit' src='richedit.html' style='width:100px;height:100px'></iframe>
- 表单字段
- 表单中所有表单元素(标签、字段)都是表单字段
- form.elements:获取表单中的所有表单字段的有序列表
- 每个表单字段在elements中的顺序与他们出现在表单标签中的顺序相同
- 可以通过位置和name特性来访问
let form = document.forms[0];
let ele = form.elements[0];
let uname = form.elements['uname']
- 表单字段的共有属性
- form:指向当前标签字段所属的表单
- name:当前标签字段的名称
- readOnly:当前标签字段是否只读
- disabled:当前标签字段是否被禁用
- tabIndex:tab序号
- value:当前标签字段被提交给服务器的值
- type:当前标签字段的类型,如radio、checkbox等
- 表单字段共有方法
- bulr():把焦点从标签中移除
- focus():把焦点设置到某个表单字段(即表单中的标签)上
- autofocus:<input type=‘text’ autofocus>,自动把焦点移到相应的表单字段
- 这两个方法不能用在display属性为none、visibility属性为hidden的元素上,会报错
- 表单字段的共有事件
- focus:当前字段获得焦点时触发
- blur:当前字段失去焦点时触发
- change:input和textarea在获得焦点到失去焦点且value值改变时触发;select只要用户选择了不同的选项不管是否失去了焦点都会触发
- 焦点元素
表单元素、a链接默认可以获得焦点。其他元素要先这只tabIndex属性为-1,才能通过调用focus()获得焦点
- 重置表单
- 所有表单字段都会恢复到页面刚加载完时的初始值,初始值为空的就恢复为空,带有默认值的就为默认值
- 有三种方法:
- 点击input和button标签的重置按钮、表单的reset()方法,三种方法都会触发reset事件
- 可以通过阻止reset事件的实践对象event的默认事件来取消重置表单
<input type='reset'>
<button type='reset'>reset</button>
form.reset()
- 提交表单
- 将表单字段数据提交给服务器
- 有三种方法:
- 点击input和button标签的提交按钮、表单的submit()方法,只有submit()方法不会触发submit事件
- 提交前需要对表单数据的有效性进行验证
- 可以通过阻止submit事件的实践对象event的默认事件来取消提交表单
<input type='submit'>
<button type='submit'>reset</button>
form.submit()
document.addEventListener(form,'submit',function(){
event.preventDefault()
})
2. 表单中的标签种类(即表单字段)
- <input>
- type属性可以为text、radio、checkbox、file、submit、reset、还有h5新增的(email、url、number、range、time、datetime、date、month、week)
- <textarea>
- <select>和<option>
- <button>
- type属性可以为submit、reset、menu、button
- <form>
3. 选择框select和选项option
- select字段的属性
- options:选择框中所有的<option>元素的集合
- multiple:是否可以多选
- size:选择框中可见的行数
- selectedIndex:基于0的选中项的索引,没有选中的为-1
- add(newOption,relOption):在指定的选项前插入指定的选项,add()方法第二个参数为undefined时为插入到最后
- remove(index):移除指定位置的选项
- value:select中的value有当前选中项决定,没有选中项时为空字符串;选中一项时,html中有指定的value值则为该值,即使value值为空字符串;当HTML中没有指定时则为标签中的文本text;当有多个选项时,value为第一个选项的值
- option字段的属性
- index:当前选项在options集合中的索引
- text:选项的文本
- value:选项的值
- selected:当前选项是否被选中
- label:当前选项的标签
- 选择选项
- 单选时:selectele.options[selectele.selectedIndex]
- 多选时:遍历所有选项,找到有selected的选项
- 添加选项
- 新建option元素,为其添加文本节点,并设置value,再将其添加到select中
- 使用Option构造函数创建option元素,该构造函数接收两个参数分别option的为text和value,并添加到select中
- 使用Option构造函数创建option元素,再用select的add()方法添加到select中
//1
let select = document.querySelector('select');
let newOption1 = document.createElement('option');
let textNode = document.createTextNode('text1');
newOption.appendChild(textNode);
select.appendChild(newOption);
//2
let newOption2 = new Option('text1','value1');
select.appendChild(newOption);
//3
let newOption3 = new Option('text1','value1');
select.add(newOption,undefined);
- 移除选项
select.removeChild(select.options[0]);
select.remove(0);
select.options[0] = null;
- 移动和重排选项
//把第3个换到第2个
let moveOption = select.options[2];
select.insertBefore(moveOption,select.options[moveOption.index-1])
4. 文本框
- input和textarea将用户输入保存在value属性中,可以通过该属性设置和读取文本框的值
- input元素,type为text的字段的属性
- size:文本框能显示的字符数
- value:文本框的初始值
- maxlength:可以接受的最大字符数
<input type='text' size='10' maxlength='50' value='init'>
- textarea字段的属性
- rows:行数
- cols:列数
- 初始值要写在开始和结束标签之间
<textarea rows='5' cols='5'>init</textarea>
- 选择文本
- select():选择文本框中的所有文本,同时将焦点设置到文本框中,不必让用户一个一个的删除文本
- select事件:选择了文本框中的文本时触发
- selectionStart、selectionEnd属性:选择文本的开始和结束位置
- setSelectionRange(start,end):选择文本框中的部分文本,从开始到结束位置的,要先将焦点设置到该文本框上
let inputname = document.querySelector('input[name=uname]');
inputname.select();//选择所有文本,并设置焦点到该文本框
inputname.value.slice(inputname.selectionStart,inputname.selectionEnd);
inputname.setSelectionRange(0,2);
- 过滤输入
- 屏蔽非数字
- 在keypress事件中,当输入为非数字时阻止其默认行为
inputname.addEventListener('keypress',function(){
if(!/\d/.test(String.fromCharCode(event.charCode))){
event.preventDefault();
}
})
- 剪贴板事件
- beforecopy:在发生复制操作前触发
- copy:在发生复制操作时触发
- beforecut:在发生剪切操作前触发
- cut:在发生剪切操作时触发
- beforepaste:在发生粘贴操作前触发
- paste:在发生粘贴操作时触发
- 访问剪贴板中的数据
- clipboardData对象:操作剪贴板的数据的对象,window或者剪贴板事件的event对象的属性
- clipboardData的方法:
- getData(要取的数据的格式即MIME类型):从剪贴板中取数据
- setData(格式,要存的文本):将文本存入剪贴板,成功返回true,否则返回false
- clearData()
- h5约束验证api
- required:必填,可能会阻止表单提交并在相应的字段下方给出提示框,也可能什么也不做也不阻止表单提交
- input的其他输入类型type:反映数据类型的信息,且提供一些默认的验证;
- 不能阻止用户输入无效的信息,但再输入无效信息时验证不通过会在字段下方给出提示,且表单不能提交
- email、url:邮箱和url地址
- 数值类型的:number、range、date、time、datetime、month、week,以上数值类的都可以添加min、max、step属性
- pattern:该属性的值为正则表达式,用于匹配文本框中的值,模式的//,开头^,结尾$默认有,所以不用再加
- checkValidity():检测表单中所有字段是否都有效,只要有一个无效就返回false;表单和表单中的每个字段上都可以使用
- validity属性:包含一系列约束条件的属性,每条返回true时就是不满足该约束的意思
- novalidate属性:禁止表单验证,表单和表单的每个字段上都可以使用
<input type="url" name="url" value="http://www.baidu.com" required novalidate>
<form method="get" action="index.php" formnovalidate>
<input type="number" min="0" max="10" step="2" required>
<input type="text" pattern="/\d+/" name="count">
forms[0].checkValidity();
input.checkValidity();
5. 表单序列化
- 浏览器向服务器发送序列化的数据
- 对表单字段的名称name和值value进行URL编码,并用和号&分隔
- radio和checkbox只发送选中的项
- select为多选是,每个选中的值为单独的一个条目
- select中的value有设置时为value的值,没设置时为text的值
- 禁用的字段不发送,type为reset和button的按钮不发送
- 只有单击提交按钮提交表单时才发送提交按钮,否则不发送提交按钮
6. 富文本编辑
- 创建服务本编辑器
- 方法一:
- 在页面中键入一个包含HTML页面的iframe,并设置designMode属性为on,这个空白的HTML页面就可以被编辑了,编辑的对象是该页面的body元素的内容
- designMode只有在页面完全加载后才能设置,所以在页面的onload事件中设置;designMode为off时不可编辑
<iframe name='richedit' src='richedit.html' style='width:100px;height:100px'>
window.onload = function(){
frames['richedit'].document.designMode = 'on';
}
window.addEventListener('load',function(){
frames['richedit'].document.designMode = 'on';
})
- 方法二
- 为任何元素设置contenteditable属性,该元素立即就可以被编辑
<div id='richedit' contenteditable></div>
- 操作富文本编辑器
document.execCommand(要执行的命令名称,false,执行命令必须的一个值/null)
- 向服务器提交富文本编辑器的内容
- 富文本编辑器中的HTML不会被自动提交给服务器,可以将其innerHTML赋值给一个表单字段,然后提交表单时提交给服务
formele.value = frames['richedit'].document.body.innerHTML
7. FormData
- FormData类型对象用于表单数据序列化,或创建与表单个数相同的数据
- 可以用于input中的file类型的数据传输,且不用设置xhr对象的请求头
- 例子:
//参数为表单元素
var data = new FormData(document.forms[0]);
//参数分别为表单字段的name和value属性
data.append('name','value');