Javascript学习笔记9 表单

表单基础

在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)函数如果匹配则返回true
• String.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;
});