每日三问之javascript之表单的基础知识、文本框&&选择框脚本

 表单的基础知识

在HTML 中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLForm-

Element 类型。

HTMLFormElement 也有它自己下列独有的属性和方法。

• acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
• action：接受请求的 URL；等价于 HTML 中的 action 特性。
• elements：表单中所有控件的集合（HTMLCollection）。
• enctype：请求的编码类型；等价于 HTML 中的 enctype 特性。
• length：表单中控件的数量。
• method：要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。
• name：表单的名称；等价于 HTML 的 name 特性。
• reset()：将所有表单域重置为默认值。
• submit()：提交表单。
• target：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

取得 <form> 元素引用的方式有好几种。

其中最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById() 方法找到它。

var form = document.getElementById("form1");

通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name 值来取得特定的表单。

var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

提交表单

用户单击提交按钮或图像按钮时，就会提交表单。使用 <input> 或 <button> 都可以定义提交按钮，只要将其 type 特性的值设置为 "submit" 即可，而图像按钮则是通过将 <input> 的 type 特性值设置为

"image" 来定义的。

// 通用提交按钮
<input type="submit" value="Submit Form"> 
// 自定义提交按钮 
<button type="submit">Submit Form</button> 
// 图像按钮 
<input type="image" src="graphic.gif">

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有

机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "submit", function(event){ 
 //取得事件对象
 event = EventUtil.getEvent(event); 
 //阻止默认事件
 EventUtil.preventDefault(event); 
});

在JavaScript 中，以编程方式调用 submit() 方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

var form = document.getElementById("myForm"); 
//提交表单
form.submit();

重置表单 

在用户单击重置按钮时，表单会被重置。

<!-- 通用重置按钮 --> 
<input type="reset" value="Reset Form"> 
<!-- 自定义重置按钮 --> 
<button type="reset">Reset Form</button>

用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置操作。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "reset", function(event){ 
 //取得事件对象
 event = EventUtil.getEvent(event); 
 //阻止表单重置
 EventUtil.preventDefault(event); 
});

也可以通过 JavaScript 来重置表单。

var form = document.getElementById("myForm"); 
//重置表单
form.reset();

表单字段

可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。

var form = document.getElementById("form1"); 
//取得表单中的第一个字段
var field1 = form.elements[0]; 
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"]; 
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用一个 name （如单选按钮），那么就会返回以该 name 命名的一个NodeList。

// html
<form method="post" id="myForm"> 
 <ul> 
 <li><input type="radio" name="color" value="red">Red</li> 
 <li><input type="radio" name="color" value="green">Green</li> 
 <li><input type="radio" name="color" value="blue">Blue</li> 
 </ul> 
</form>

// js
var form = document.getElementById("myForm"); 
var colorFields = form.elements["color"]; 
alert(colorFields.length); //3 
var firstColorField = colorFields[0]; 
var firstFormField = form.elements[0]; 
alert(firstColorField === firstFormField); //true

文本框脚本

在 HTML 中，有两种方式来表现文本框：一种是使用 <input> 元素的单行文本框，另一种是使用<textarea>的多行文本框。

<input type="text" size="25" maxlength="50" value="initial value">

<textarea> 元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows和 cols 特性。其中， rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数。

与 <input> 元素不同， <textarea> 的初始值必须要放在<textarea>和 </textarea> 之间。

<textarea rows="25" cols="5">initial value</textarea>

无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在 value 属性中。可 以通过这个属性读取和设置文本框的值。

var textbox = document.forms[0].elements["textbox1"]; 
alert(textbox.value); 
textbox.value = "Some new value";

选择文本

上述两种文本框都支持 select() 方法，这个方法用于选择文本框中的所有文本。

var textbox = document.forms[0].elements["textbox1"]; 
textbox.select();

选择（select）事件

与 select() 方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select事件。

var textbox = document.forms[0].elements["textbox1"]; 
EventUtil.addHandler(textbox, "select", function(event){ 
 var alert("Text selected" + textbox.value); 
});

 取得选择的文本

该规范采取的办法是添加两个属性：selectionStart 和 selectionEnd 。这两个属性中保存的是基于 0 的数值，表示所选择文本的范围。

function getSelectedText(textbox){ 
 return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 
}

选择部分文本

现在除 select() 方法之外，所有文本框都有一个 setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

textbox.value = "Hello world!" 
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!" 
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel" 
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"

过滤输入

我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。例如，必须包含某些字符，或者必须匹配某种模式。

屏蔽字符

在极端的情况下，可以通过下列代码屏蔽所有按键操作。

EventUtil.addHandler(textbox, "keypress", function(event){ 
 event = EventUtil.getEvent(event); 
 EventUtil.preventDefault(event); 
});

如果只想屏蔽特定的字符，则需要检测 keypress 事件对应的字符编码，然后再决定如何响应。例如，下列代码只允许用户输入数值。

EventUtil.addHandler(textbox, "keypress", function(event){ 
 event = EventUtil.getEvent(event); 
 var target = EventUtil.getTarget(event); 
 var charCode = EventUtil.getCharCode(event); 
 if (!/\d/.test(String.fromCharCode(charCode))){
    EventUtil.preventDefault(event); 
 } 
});

操作剪贴板

下列就是 6 个剪贴板事件。

• beforecopy：在发生复制操作前触发。
• copy：在发生复制操作时触发。
• beforecut：在发生剪切操作前触发。
• cut：在发生剪切操作时触发。
• beforepaste：在发生粘贴操作前触发。
• paste：在发生粘贴操作时触发。

要访问剪贴板中的数据，可以使用 clipboardData 对象。

var EventUtil = { 
 //省略的代码
 getClipboardText: function(event){ 
 var clipboardData = (event.clipboardData || window.clipboardData); 
 return clipboardData.getData("text"); 
 }, 
 //省略的代码
 
 setClipboardText: function(event, value){ 
 if (event.clipboardData){ 
 return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){ 
 return window.clipboardData.setData("text", value); 
 } 
 }, 
 //省略的代码
};

自动切换焦点

tabForward() 函数是实现“自动切换焦点”的关键所在。

EventUtil.addHandler(textbox3, "keyup", tabForward);

HTML5 约束验证API

必填字段

<input type="text" name="username" required>

 其他输入类型

"email" 和 "url" 是两个得到支持最多的类型

<input type="email" name ="email"> 
<input type="url" name="homepage">

数值范围 

<input type="number" min="0" max="100" step="5" name="count">

输入模式 

例如，如果只想允许在文本字段中输入数值。

<input type="text" pattern="\d+" name="count">

检测有效性

使用 checkValidity()方法可以检测表单中的某个字段是否有效。换句话说，必填字段中如果没有值就是无效的，而字段中的值与 pattern 属性不匹配也是无效的。

if (document.forms[0].elements[0].checkValidity()){ 
 //字段有效，继续 
} else { 
 //字段无效
}

禁用验证

通过设置 novalidate 属性，可以告诉表单不进行验证。

<form method="post" action="signup.php" novalidate> 
 <!--这里插入表单元素--> 
</form>

选择框脚本

选择选项

对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属性。

var selectedOption = selectbox.options[selectbox.selectedIndex];

另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true 。

selectbox.options[0].selected = true;

添加选项

可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。

var newOption = document.createElement("option"); 
newOption.appendChild(document.createTextNode("Option text")); 
newOption.setAttribute("value", "Option value"); 
selectbox.appendChild(newOption);

第二种方式是使用 Option 构造函数来创建新选项，Option 构造函数接受两个参数：文本（ text ）和值（ value ）

var newOption = new Option("Option text", "Option value"); 
selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题


var newOption = new Option("Option text", "Option value"); 
selectbox.add(newOption, undefined); //最佳方案

移除选项

与添加选项类似，移除选项的方式也有很多种。首先，可以使用 DOM 的 removeChild() 方法。

selectbox.removeChild(selectbox.options[0]); //移除第一个选项

其次，可以使用选择框的 remove() 方法。这个方法接受一个参数，即要移除选项的索引。

selectbox.remove(0); //移除第一个选项

最后一种方式，就是将相应选项设置为 null 。

selectbox.options[0] = null; //移除第一个选项

要清除选择框中所有的项，需要迭代所有选项并逐个移除它们。

function clearSelectbox(selectbox){ 
 for(var i=0, len=selectbox.options.length; i < len; i++){ 
 selectbox.remove(i); 
 } 
}