js基础篇–表单

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


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


凡心所向,素履所往