面试知识点总结 - js 表单_js实现填写的面试表单

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1. 表单字段

1. 表单中所有表单元素（标签、字段）都是表单字段
2. form.elements：获取表单中的所有表单字段的有序列表
3. 每个表单字段在elements中的顺序与他们出现在表单标签中的顺序相同
4. 可以通过位置和name特性来访问

let form = document.forms[0];
let ele = form.elements[0];
let uname = form.elements['uname']
1
2
3

2. 表单字段的共有属性

1. form：指向当前标签字段所属的表单
2. name：当前标签字段的名称
3. readOnly：当前标签字段是否只读
4. disabled：当前标签字段是否被禁用
5. tabIndex：tab序号
6. value：当前标签字段被提交给服务器的值
7. type：当前标签字段的类型，如radio、checkbox等

3. 表单字段共有方法

1. bulr()：把焦点从标签中移除
2. focus()：把焦点设置到某个表单字段（即表单中的标签）上
3. autofocus：<input type=‘text’ autofocus>，自动把焦点移到相应的表单字段
4. 这两个方法不能用在display属性为none、visibility属性为hidden的元素上，会报错

4. 表单字段的共有事件

1. focus：当前字段获得焦点时触发
2. blur：当前字段失去焦点时触发
3. change：input和textarea在获得焦点到失去焦点且value值改变时触发；select只要用户选择了不同的选项不管是否失去了焦点都会触发

5. 焦点元素

表单元素、a链接默认可以获得焦点。其他元素要先这只tabIndex属性为-1，才能通过调用focus()获得焦点

6. 重置表单

1. 所有表单字段都会恢复到页面刚加载完时的初始值，初始值为空的就恢复为空，带有默认值的就为默认值
2. 有三种方法：

1. 点击input和button标签的重置按钮、表单的reset()方法，三种方法都会触发reset事件
2. 可以通过阻止reset事件的实践对象event的默认事件来取消重置表单

<input type='reset'>
<button type='reset'>reset</button>
form.reset()
1
2
3

7. 提交表单

1. 将表单字段数据提交给服务器
2. 有三种方法：

1. 点击input和button标签的提交按钮、表单的submit()方法，只有submit()方法不会触发submit事件
2. 提交前需要对表单数据的有效性进行验证
3. 可以通过阻止submit事件的实践对象event的默认事件来取消提交表单

<input type='submit'>
<button type='submit'>reset</button>
form.submit()
document.addEventListener(form,'submit',function(){
	event.preventDefault()
})
1
2
3
4
5
6

2. 表单中的标签种类（即表单字段）

1. <input>

1. type属性可以为text、radio、checkbox、file、submit、reset、还有h5新增的（email、url、number、range、time、datetime、date、month、week）

2. <textarea>
3. <select>和<option>
4. <button>

1. type属性可以为submit、reset、menu、button

5. <form>

3. 选择框select和选项option

1. select字段的属性

1. options：选择框中所有的<option>元素的集合
2. multiple：是否可以多选
3. size：选择框中可见的行数
4. selectedIndex：基于0的选中项的索引，没有选中的为-1
5. add(newOption,relOption)：在指定的选项前插入指定的选项，add()方法第二个参数为undefined时为插入到最后
6. remove(index)：移除指定位置的选项
7. value：select中的value有当前选中项决定，没有选中项时为空字符串；选中一项时，html中有指定的value值则为该值，即使value值为空字符串；当HTML中没有指定时则为标签中的文本text；当有多个选项时，value为第一个选项的值

2. option字段的属性

1. index：当前选项在options集合中的索引
2. text：选项的文本
3. value：选项的值
4. selected：当前选项是否被选中
5. label：当前选项的标签

3. 选择选项

1. 单选时：selectele.options[selectele.selectedIndex]
2. 多选时：遍历所有选项，找到有selected的选项

4. 添加选项

1. 新建option元素，为其添加文本节点，并设置value，再将其添加到select中
2. 使用Option构造函数创建option元素，该构造函数接收两个参数分别option的为text和value，并添加到select中
3. 使用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);
1
2
3
4
5
6
7
8
9
10
11
12

5. 移除选项

select.removeChild(select.options[0]);
select.remove(0);
select.options[0] = null;
1
2
3

6. 移动和重排选项

//把第3个换到第2个
let moveOption = select.options[2];
select.insertBefore(moveOption,select.options[moveOption.index-1])
1
2
3

4. 文本框

1. input和textarea将用户输入保存在value属性中，可以通过该属性设置和读取文本框的值
2. input元素，type为text的字段的属性

1. size：文本框能显示的字符数
2. value：文本框的初始值
3. maxlength：可以接受的最大字符数

<input type='text' size='10' maxlength='50' value='init'>
1

3. textarea字段的属性

1. rows：行数
2. cols：列数
3. 初始值要写在开始和结束标签之间

<textarea rows='5' cols='5'>init</textarea>
1

4. 选择文本

1. select()：选择文本框中的所有文本，同时将焦点设置到文本框中，不必让用户一个一个的删除文本
2. select事件：选择了文本框中的文本时触发
3. selectionStart、selectionEnd属性：选择文本的开始和结束位置
4. setSelectionRange(start,end)：选择文本框中的部分文本，从开始到结束位置的，要先将焦点设置到该文本框上

let inputname = document.querySelector('input[name=uname]');
inputname.select();//选择所有文本，并设置焦点到该文本框
inputname.value.slice(inputname.selectionStart,inputname.selectionEnd);
inputname.setSelectionRange(0,2);
1
2
3
4

5. 过滤输入

1. 屏蔽非数字

1. 在keypress事件中，当输入为非数字时阻止其默认行为

inputname.addEventListener('keypress',function(){
	if(!/\d/.test(String.fromCharCode(event.charCode))){
    	event.preventDefault();
    }
})
1
2
3
4
5

2. 剪贴板事件

1. beforecopy：在发生复制操作前触发
2. copy：在发生复制操作时触发
3. beforecut：在发生剪切操作前触发
4. cut：在发生剪切操作时触发
5. beforepaste：在发生粘贴操作前触发
6. paste：在发生粘贴操作时触发

3. 访问剪贴板中的数据

1. clipboardData对象：操作剪贴板的数据的对象，window或者剪贴板事件的event对象的属性
2. clipboardData的方法：

1. getData(要取的数据的格式即MIME类型)：从剪贴板中取数据
2. setData(格式,要存的文本)：将文本存入剪贴板，成功返回true，否则返回false
3. clearData()

6. h5约束验证api

1. required：必填，可能会阻止表单提交并在相应的字段下方给出提示框，也可能什么也不做也不阻止表单提交
2. input的其他输入类型type：反映数据类型的信息，且提供一些默认的验证；

1. 不能阻止用户输入无效的信息，但再输入无效信息时验证不通过会在字段下方给出提示，且表单不能提交
2. email、url：邮箱和url地址
3. 数值类型的：number、range、date、time、datetime、month、week，以上数值类的都可以添加min、max、step属性
4. pattern：该属性的值为正则表达式，用于匹配文本框中的值，模式的//,开头^,结尾$默认有，所以不用再加
5. checkValidity()：检测表单中所有字段是否都有效，只要有一个无效就返回false；表单和表单中的每个字段上都可以使用
6. validity属性：包含一系列约束条件的属性，每条返回true时就是不满足该约束的意思
7. 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();
1
2
3
4
5
6

5. 表单序列化

1. 浏览器向服务器发送序列化的数据

1. 对表单字段的名称name和值value进行URL编码，并用和号&分隔
2. radio和checkbox只发送选中的项
3. select为多选是，每个选中的值为单独的一个条目
4. select中的value有设置时为value的值，没设置时为text的值
5. 禁用的字段不发送，type为reset和button的按钮不发送
6. 只有单击提交按钮提交表单时才发送提交按钮，否则不发送提交按钮

6. 富文本编辑

1. 创建服务本编辑器

1. 方法一：

1. 在页面中键入一个包含HTML页面的iframe，并设置designMode属性为on，这个空白的HTML页面就可以被编辑了，编辑的对象是该页面的body元素的内容
2. 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';
})
1
2
3
4
5
6
7

2. 方法二

1. 为任何元素设置contenteditable属性，该元素立即就可以被编辑

<div id='richedit' contenteditable></div>
1

2. 操作富文本编辑器

document.execCommand(要执行的命令名称,false,执行命令必须的一个值/null)
1

3. 向服务器提交富文本编辑器的内容

1. 富文本编辑器中的HTML不会被自动提交给服务器，可以将其innerHTML赋值给一个表单字段，然后提交表单时提交给服务

formele.value = frames['richedit'].document.body.innerHTML
1

7. FormData

1. FormData类型对象用于表单数据序列化，或创建与表单个数相同的数据
2. 可以用于input中的file类型的数据传输，且不用设置xhr对象的请求头
3. 例子：

//参数为表单元素
var data = new FormData(document.forms[0]);
//参数分别为表单字段的name和value属性
data.append('name','value');
1
2
3
4