var textBox = document.getElementById("myForm").elements["firstName"]; textBox.autofocus = true; textBox.addEventListener("keypress", function () { if (!/\d/.test(String.fromCharCode(event.charCode))) { //仅输入数字 event.preventDefault(); }; });
但是部分浏览器会对向上、下键、退格键触发keypress事件，所以需要对这些常用的操作键取消禁止，只要不屏蔽那些字符编码小于10的键即可：
textBox.addEventListener("keypress", function () { if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { //仅输入数字 event.preventDefault(); }; });
四、操作剪贴板
以下是6个剪贴板事件
beforecopy：在发生复制操作前触发
copy：在发生复制时触发
beforecut：在发生剪贴前操作
cut：在发生加贴时操作
beforepaste：在发生黏贴操作前触发
paste：在发生黏贴操作时触发
如设置禁止拷贝：
//拷贝之前提示禁止拷贝 textBox.addEventListener("beforecopy", function() { textBox.value = "do not copy"; }); //拷贝时禁止拷贝 textBox.addEventListener("copy", function() { event.preventDefault(); });
要访问剪贴板中的数据，可以使用clipboardData对象，在IE中，这个对象是window对象的属性，在friefox，safari和chrome，这个对象是相应event对象的属性；在IE中可以随时访问该对象；但在其他浏览器中只有在处理剪贴板事件期间才有效。
这个clipboardData对象有三个方法：
getData()
setData()
clearData()
getData()接收一个参数，即要取得数据的格式（IE中有两种数据格式：text和URL；在其他浏览器中这个参数是一种MIME类型；不过可以用text代替text/plain）。
setData()接收两个参数，即数据类型和要放在剪贴板中的文本。（第一个参数中，IE支持text和URL；第二个参数中chrome和safari不支持text类型）;这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回false：
function getClipboardText(event) { var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); } function setClipboardText(event, value) { if (event.clipboardData) { return event.clipboardData.setData("text/plain", value); } else if (window.clipboardData) { return window.clipboardData.setData("text", value); } }
目前浏览器逐渐收紧对访问剪贴板的操作。
五、自动切换焦点
理论上就是在前一个文本框中的字符打到最大数量后，自动将焦点切换到下一个文本框：
DOM:
<form action=""> <input type="text" maxLength="3"> <input type="text" maxLength="3"> <input type="text" maxLength="4"> <input type="submit" value="submit"> </form>
js:
var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); textbox1.addEventListener("keyup", tabForward); textbox2.addEventListener("keyup", tabForward); textbox3.addEventListener("keyup", tabForward); function tabForward() { var target = event.target; //当value长度等于最大值的时候 if (target.value.length == target.maxLength) { var form = target.form; //遍历所在的form表单中的元素 for (var i = 0, len = form.elements.length; i < len; i++) { //如果该元素是目标元素 if (form.elements[i] == target) { //并且该元素的下一个元素为true 其他条件 if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) { //则下个元素获得焦点 form.elements[i + 1].focus(); } } }; } }
六、HTML5约束验证API
1、必填字段required属性
在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性：
var isRequiredSupported="required" in document.createElement("input");
2、其他输入类型
input的type属性增加了“email”和“url”；各浏览器也都为它们增加了定制的验证机制：
var input = document.createElement("input"); input.type = "email"; var isEmailSupported = (input.type == "email");
3、数值范围