Practical tips about form scripts in JavaScript

Avoid submitting the form multiple times

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

The above code adds an event handler for the submit event of the form. After the event is triggered, the code gets the submit button and puts it Its disabled attribute is set to true. Note that this function cannot be implemented through the onclick event handler. The reason is due to the "time difference" between different browsers: some browsers will trigger the click event before triggering the submit event of the form.

Modify the background color of the text box according to conditions

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)

Get the selected text

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

Selected part 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();
    }
}

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

Effect:

Test 2:

selecText(textbox, 0, 5);

Get clipboard information

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

Note: Firefox, Safari, Chrome only allow access to the getData() method in the onpaste event handler. (Test 2017/9/1: in copy Get the empty string under the event)

Purpose:
In the paste event, you can determine whether the value of the clipboard is valid. If it is invalid, you can cancel the default as in the example below Behavior.

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

Automatically switch focus

Effect:

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

The above is the detailed content of Practical tips about form scripts in JavaScript. For more information, please follow other related articles on the PHP Chinese website!