JavaScript关于表单脚本的一些实用技巧

避免多次提交表单

var form = document.getElementById("myform");form.addEventListener("submit", function(event) {    var event = event || window.event;    var target = event.target;    var btn = target.elements["submit-btn"];    btn.disabled = true;}, false);

以上代码为表单的submit事件添加了一个事件处理程序. 事件触发后, 代码取得了提交按钮, 并将其disabled属性设置为true. 注意, 不能通过onclick事件处理程序来实现这个功能. 原因是因不同浏览器之间存在”时差”: 有的浏览器会在触发表单的submit事件之前触发click事件.

---

根据条件修改文本框背景颜色

var textbox = document.forms[0].elements[0];textbox.addEventListener("focus", function(event) {    var event = event || window.event,        target = event.target;    if (target.style.backgroundColor != "red") {        target.style.backgroundColor = "yellow";    }}, false);textbox.addEventListener("blur", function(event) {    var event = event || window.event,        target = event.target;    if (/[^\d]/.test(target.value)) {        target.style.backgroundColor = "red";    } else {        target.style.backgroundColor = "";    }}, false);textbox.addEventListener("change", function(event) {    var event = event || window.event,        target = event.target;    console.log(123)    if (/[^\d]/.test(target.value)) {        target.style.backgroundColor = "red";    } else {        target.style.backgroundColor = "";    }}, false)

---

取得选择的文本

function getSelectedText(textbox) {    if (typeof textbox.selectionStart == "number") {        return textbox.value.substring(textbox.selectionStart, textbox.sectionEnd);    } else if (document.selection) {//兼容IE        return document.selection.createRange().text;    }}

---

选择部分文本

function selecText(textbox, startIndex, stopIndex) {    if (textbox.setSelectionRange) {        textbox.setSelectionRange(startIndex, stopIndex);    } else if (textbox.createTextRange) {//兼容IE8及更早版本        var range = textbox.createTextRange();        range.collapse(true);        range.moveStart("character", startIndex);        range.moveEnd("character", stopIndex - startIndex);        range.select();        textbox.focus();    }}

测试1:

textbox.addEventListener("focus", function(event) {    var event = event || window.event,        target = event.target;    if (target.style.backgroundColor != "red") {        target.style.backgroundColor = "yellow";    }    selecText(textbox, 0, 1);}, false);

效果:

测试2:

selecText(textbox, 0, 5);

---

获得剪切板信息

    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);        }    }

注意: Firefox, Safari, Chrome只允许在onpaste事件处理程序中访问getData( )方法. (测试2017/9/1: 在copy事件下获取返回空字符串)

用途:
在paste事件中, 可以确定剪切板的值是否有效, 如果无效, 就可以像下面示例中那样, 取消默认的行为.

textbox.addEventListener("paste", function(event) {    var event = event || window.event;    text = getClipboardText(event);    if (!/^\d*$/.test(text)) {        event.preventDefault();    }}, false)

---

自动切换焦点

效果:

//HTML <form method="post" id="myform">        <input type="text" name="tel1" id="textTel1" maxlength="3">        <input type="text" name="tel2" id="textTel2" maxlength="3">        <input type="text" name="tel3" id="textTel3" maxlength="4">    </form>

//Js(function() {    function tabForward(event) {        var event = event || window.event;        target = event.target;        if (target.value.length == target.maxLength) {            var form = target.form;            for (var i = 0, len = form.elements.length; i < len; i++) {                if (form.elements[i] == target) {                    if (form.elements[i + 1]) {                        form.elements[i + 1].focus();                    }                }            }        }    }    var textbox1 = document.getElementById("textTel1");    var textbox2 = document.getElementById("textTel2");    var textbox3 = document.getElementById("textTel3");    textbox1.addEventListener("keyup", tabForward);    textbox2.addEventListener("keyup", tabForward);    textbox3.addEventListener("keyup", tabForward);})();