表单基础
在JS中,表单对应的是HTMLForm-Element类型,其继承自HTMLElement,具有以下独有的属性和方法
- action:接受请求的URL
- method:发送HTTP请求的类型
- enctype:编码类型
- reset():重置表单
- submit():提交表单
通过document.forms
可以取得页面中所有表单,在这个表单集合中,可通过索引号访问
var form = document.forms[0];、
提交表单
定义以下任意一种提交按钮
<input type="submit" value="submit form">
<button type="submit">submit</button>
<input type="image" src="1.gif">
使用JS提交表单
var form = document.getElementById("myform");
form.addEventListener("submit",function(event){
event.preventDefault(); //阻止提交表单
//do something
form.submit(); //提交表单,此种方法不会触发submit事件
},false);
重置表单
定义以下任意一种重置按钮
<input type="reset" value="reset form">
<button type="reset" >reset</button>
使用JS重置表单
var form = document.getElementById("myform");
form.addEventListener("reset",function(event){
event.preventDefault(); //阻止重置表单
//do something
},false);
form.reset(); //此种方法会触发reset事件
表单字段
可以通过表单的elements
属性访问表单字段,可以按照位置和name来访问
var form = document.getElementById("myform");
var field1 = form.elements[0];
var field2 = form.elements["textbox1"];
var length = form.elements.length;
- 当有多个表单控件使用同一name时,通过
name
访问表单元素时,会返回一个集合
表单字段共有的属性和方法
- disabled:布尔值,表示当前字段是否禁用
- form:指向当前字段的表单指针
- name:当前字段的名称
- readOnly:布尔值,表示当前字段是否只读
- type:当前字段的类型(fieldset元素不具有此属性)
- value:当前字段的值,对文件字段来说,此属性只读,其包含着文件的路径
- focus():将浏览器的焦点设置到该字段
- blur():移除焦点
除form属性外,可通过JS修改表单字段的属性
var form = document.getElementById("myform");
var field1 = form.elements[0];
field1.value = "new value";
field.focus();
field.disabled = true;
表单字段共有的事件
- focus:当前字段获得焦点时触发
- blur:当前字段失去焦点时触发
- change:对于input和textarea元素,当它们失去焦点且值改变时触发;而对于select元素,当选项改变时触发
文本框脚本
HTML有两种方式表现文本框:<input>
元素的单行文本框和<textarea>
元素的多行文本框
- 对于
<input>
元素,使用size
属性指定文本框显示的字符数,而通过maxlength
属性指定允许输入的最大字符数 - 对于
<textarea>
元素,可以使用rows
属性和cols
属性指定文本框的行数和列数,其没有最大字符数。
选择文本
选择所有文本
var textbox = document.forms[0].elements["textbox1"];
textbox.select();
- 与
select()
方法对应的是select事件,其在选择了文本框的文本后触发
使用selectionStart
和selectionEnd
属性(偏移量),取得选择的文本
var selectedText = textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
选择部分文本
textbox.setSelectionRange(开头字符索引,结尾字符索引);
- 要看到选择的文本,必须在调用
setSelectionRange()
之前或之后立即将焦点设置到文本框
过滤输入
使用正则表达式来过滤输出
textbox.addEventListener("keypress",function(event){ //只允许用户输入数值
if (!/\d/.test(String.fromCharCode(event.charCode)) && !event.ctrlKey){
evnet.preventDefault(); //阻止输入
}
},false);
pattern.test(text)
函数如果匹配则返回trueString.fromCharCode()
函数将字符编码转换为字符串event.ctrlKey
用于检测用户是否使用复制和粘贴
操作剪贴板
包括6个剪切板事件:beforecopy,copy,beforecut,cut,beforepaste,paste
剪切板数据存储在clipboardData
对象中,在IE中,其实window对象的属性,在其他浏览器,其是event对象的属性
clipboardData对象有三个方法:getData()
, setData()
, clearData()
。getData接受一个参数,即数据格式,可用“text”。setData()接受两个参数,数据格式和要放到剪切板的文本
var clipboard = (event.clipboardData || window.clipboardData);
clipboard.getData("text");
clipboard.setData("text","new value"); //IE
clipboard.setData("text/plain","new value"); //其他浏览器
HTML5约束验证API
必填字段
<input type="text" name="username" required>
其他输入类型
<input type="email" name="email">
<input type="url" name="homepage">
有效性检测
form.checkValidity() //有效而返回true,否则返回false
- 每个表单字段和表单本身都具有该方法
禁用验证 (novalidate)
<form method="post" action="zjw.php" novalidate>
</form>
选择框脚本
选择框是通过<select>
和<option>
元素创建的
HTMLSelectElement类型的属性和方法:
- add(newOption,relOption) :插入新的
<option>
元素,插入位置在相关选项之前 - multiple:布尔值,表示是否允许多选
- options:所有
<option>
元素的集合 - remove(index):移除指定位置的选项
- selectedIndex:选中项的索引,若有多个项被选中,只保存第一个选中项的索引
HTMLOptionElement类型的属性和方法:
- index:当前选项的索引
- label:当前选项的标签
- selected:布尔值,true表示被选中
- text:选择项的文本
- value:选项的值
var selectbox = document.forms[0].elements["selectbox1"];
var text = selectbox.options[0].text; //选择框第一个选项的文本
var text = selectbox.options[0].value; //选择框第一个选项的值
var selectedOption = selectbox.options[selectbox.selectedIndex]; //取得选中项
selectbox.options[0].selected = true; //选中选择框的第一项
var newOption = new Option("option text","option value"); //调用构造函数创建新的选项
selectbox.add(newOption, undefined); //添加到选择框的末尾
selectbox.remove(0); //移除第一个选项
富文本编辑
创建富文本区域
方法1:在页面中嵌入一个包含空的HTML页面的iframe,通过设置designMode的值为“on”,来使得该页面能够被编辑,编辑对象则是该页面的<body>
元素代码
<iframe name="richEdit" src="blank.htm" style="width:100px;height:100px"></iframe>
<script>
window.addEventListener("load",function(){
frames["richEdit"].document.designMode = "on";
},false);
</script>
方法2:将contenteditable属性赋给页面中的任何元素,使其可以被编辑
<div class="editable" contenteditable></div>
- 也可以通过JS将该属性设置为true
操作富文本
主要方式为document.execCommand()
,该方法接受三个参数:命令名称,一个表示是否提供用户界面的布尔值,执行命令的值(或null)。其中第二个参数应始终设置为false
//将选择的文本转换粗体文本
frames["richEdit"].document.execCommand("bold",false,null);
//将选择的文本转换为斜体文本
frames["richEdit"].document.execCommand("italic",false,null);
//创建链接
frames["richEdit"].document.execCommand("createlink",false,"https://www.zjw666.top");
//格式化为1级标题
frames["richEdit"].document.execCommand("formatblock",false,"<h1>");
//插入图像
frames["richEdit"].document.execCommand("insertimage",false,"pic/zjw.jpg");
- 对于具有contenteditable属性为true的元素来说,直接替换成document对象即可,例如
document.execCommand("bold",false,null);
- 除此之外,还有三个方法,分别是
queryCommandEnabled()
(检测命令是否适用,适用则返回true),queryCommandState()
(检测命令的执行状态,执行成功返回true),queryCommandValue()
(检测已执行命令的传入值),他们都接受一个参数,及命令名称
var result = frames["richEdit"].document.queryCommandState("bold"); //检测粗体命令是否执行成功
富文本选区
使用框架的getSelection()
方法,返回Selection对象
var selection = frames["richEdit"].getSelection();
var text = selection.toString(); //取得选区的文本
var range = selection.getRangeAt(0) //返回第一个选区对应的范围
var span = frames["richEdit"].document.createElement("span");
span.style.backgroundColor = "red";
range.surroundContents(span); //使用节点环绕选区内容,达到突出文本的效果
表单和富文本
富文本不会被表单自动提交,需要我们自己提取内容
form.addEventListener("sumbit",function(event){
var target = evnet.target;
//将选区内容复制给comments元素的值
target.elements["comments"].value = frames["richEdit"].document.body.innerHTML;
// 对于具有contenteditable属性的元素
// target.elements["comments"].value = document.getElementById("richEdit").innerHTML;
});