js基础篇–表单

发布于 2018-11-21  440 次阅读

html里，表单对应<form>
js里，表单对应HTMLFormElement类型，继承自HTMLElement。HTMLFormElement常用属性与方法：
  1. acceptCharset:服务器能处理的字符集,等价于html的accept-charset
常用的字符集有：
  • UTF-8 - Unicode 字符编码
  • ISO-8859-1 - 拉丁字母表的字符编码
2. action 接收请求的URL=action （html）
3. elements 表单元素集合，有序nodelist列表，顺序与出现在标记里顺序相同，含<input><fieldset>, 不是<li>,<ul>
4. entype，请求编码类型
5. method 请求方法get/post
6. name 表单名称
7. length 表单控件数量
8 reset() 表单重置为默认值
9 submit() 提交表单
10. target，请求与接收窗口名称
html属性一一对应
获取form表单方式：
  • var form = document.getElementById();
  • var firstForm = document.forms[0];
  • var myForm = document.forms['form2'], //form2为name名
提交表单方式
  • <input type="submit" value="">
  • <button type='submit'></button>
  • <input type='image' src='a.gif'>
用户只要点击相应按钮/回车键，即可提交表单，提交前触发submit事件，
阻止表单提交，可通过submit事件，用事件e.preventDefault()阻止默认行为
2.
  • var form = document.getElementById();
form.submit(),提交前不触发submit事件，故提交前校验表单，
注：避免重复提交表单，用submit事件，在提交后可禁用提交按钮，btn.disabled=true；
不能用click事件，每个浏览器对提交按钮click处理不同
onsumit句柄是提交前对表单进行操作
重置表单,恢复默认值
1.
  • <input type='reset' >
  • <button type="reset">
2. var form = document.getElementById();
form.reset(),//reset也会触发reset事件
阻止重置，可通过reset事件，用事件e.preventDefault()阻止默认行为
表单字段：访问表单里元素elements：
var form = document.getElementById();
1.顺序 form.elements[0]//访问到一个
2.name form.elements['textbox'];//可能访问到多个
  1. 共有表单字段属性
  • disabled :true/false
  • form 指向当前字段所属表单的指针
  • name 当前字段的名称,每个字段必须要有name属性
  • readOnly :true/false
  • type 当前字段类型，如'checkbox','radio'
  • value 当前字段提交给服务器值。对文件字段来说，该属性只读
  1. 共有表单字段方法
  • focus() 浏览器焦点设置到表单字段，html5有对应属性autofocus ，自动将焦点移到该字段
  • blur()
这两个方法会触发相应事件
3. 共有表单字段事件
  • blur 当前字段失去焦点时触发
  • change <input>,<textarea>元素，在失去焦点且value值改变时触发，
<select>元素，在选项改变时触发，不冒泡
  • focus 当前字段获得焦点时触发
文本框脚本
文本
  • <input type="text" size='25' maxlength="50" value="hello">
  • <textarea rows="23" cols="2" name="textarea1"></textarea>
例：
读取textarea 值，var textarea1 = document.forms[0],elements['textarea1'];
textarea1.select()//选择全部文本，可用createTextRange()/
setSelectRange()选择范围
选择文本
  • select()方法，可配合focus()方法或autofocus属性，让文本框自动获取焦点并选中所有值
  • select事件 ，选择文本框里的文本时，会触发select事件
  • setSelectionRange(a,b)方法，a为要选择的第一个字符索引，b为最后一个字符之后的字符的索引，可选择部分文本
取得选择的文本
文本框两个属性:selectionStart,selectionEnd
操作剪贴板
事件:copy,cut,paste,before~,在事件回调里拿到剪贴板
对象 clipboardData
对象：clipboardData ,方法getData(),setData(),clearData()
约束验证API
  • required
html: <input type="text" name='useName' required>
js : document.forms[0].elements[useName].required
  • input type
新增：email,url,number,range,datetime,date,month,week,time,浏览器支持不太好
例：<input type='number' max='100' min='0' step='5',name='count'>
  • 输入模式匹配 pattern
html <input type='text' pattern="\d+" name="count">
js document.forms[0].elements['count'].pattern;
  • 有效性 1 checkValidity()方法，表单/字段都有
document.forms[0].elements[0].checkValidity()
document.forms[0].checkValidity()
2 validity属性
  • 禁用验证 novalidate 表单提交不用验证
<form method="post" action='', novalidate >
选择框脚本<select><option>,
<select>js类型为HTMLSelectElement，其方法与属性为
  • add(newOption,relOption) ,向控件插入<option>元素，位置在relOption前
  • multiple:true/false，
  • options:控件所有<option>元素的HTMLCollection
  • remove(index) ,移除给定位置选项
  • selectedIndex:基于0的选中项的索引，没有为-1
<select> value：
  • 没有选择项，选择框value属性为空字符串
  • 一个选中项，选择框value属性为选中的<option>的value属性值
  • 一个选中项，option没有指定value属性，选择框value属性为选中的<option>的文本值
  • 多个选中项，根据前两条取第一个option的值
<option>js类型HTMLOptionElement,其方法与属性为
  • index 当前选项在options集合里索引
  • selected: true/false
  • text 选项的值
  • value 选项的值
eg. var value = selectbox.options[0].value
option添加选项
  • var newOption=document.createElement('option')
newOption.appendChild(document.createTextNode('Option text'));
newOption.setAttribute('value','hello');
selectbox.appendChild(newOption);
  • var newOption =new Option('Option text','hello');//option构造函数，接收text,value
selectbox.appendChild(newOption);
  • var newOption = new Option('Option text','hello');
selectbox.add(newOption,undefined);//option，位置，插到最后一个
option移除选项
  • selectbox.removeChild(select.options[0]);
  • selectbox.remove[0]
  • selectbox.options[0] = null;
option重排选项
向前一位：var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,select.options[optionToMove.index-1]);
向后移1位 //selectbox.insertBefore(optionToMove,select.options[optionToMove.index+2]))
表单序列化：利用type属性，表单字段name，value属性，发给后台
1：表单名称与值url编码，用&分隔
2：不发禁用的表单字段
3：只发勾选的复选框与单选按钮
4：不发button,reset按钮
5:多选框每个选中值单独一个条目
6：<select>里option的value/text值
7：有提交按钮，发提交按钮，否则不发
富文本编辑器
1：页面嵌入一个空html页面iframe，设置designMode属性（on:可编辑，off：不可编辑） frames['a'].document.designMode = 'on';//a为name值
2：设置元素的contentEditable,不用iframe
var div = document.getElementById('a');
div.contentEditable=true;
操作富文本 document.execCommand()
frames['a'].document.execCommand('bold',false,null)//三个参数：命令，是否为当前命令提供一个布尔值，执行命令必须传的值
富文本选区 getSelection() window/document对象共有
调用会返回表示当前选择文本的Selection对象，有属性（不重要）
方法：
  • addRange(range)，指定Dom内容添加到选区
  • collapse(node,offset)
  • toString(),返回选区包含的文本内容
  • removeRange(range),移除指定DOM范围
表单与富文本
富文本是iframe非表单控件实现，其html不能自动提交给服务器，需手工提取并提交，可添加一个隐藏的表单字段，等于iframe里提出的html

赏

凡心所向，素履所往