kotak input jquery kehilangan fokus selepas input

Dengan pembangunan berterusan teknologi hadapan, jquery telah menjadi alat yang sangat diperlukan dalam banyak pembangunan web. Antaranya, penggunaan kotak input tidak dapat dielakkan Selepas input pengguna selesai, bagaimana untuk mencetuskan operasi yang berkaitan untuk menjadikan operasi pengguna lebih mudah telah menjadi masalah yang perlu dipertimbangkan oleh pembangun bahagian hadapan. Artikel ini akan memperkenalkan cara menggunakan jquery untuk menyedari bahawa kotak input kehilangan fokus selepas input.

1. Keperluan

Selepas input dalam kotak input borang selesai, cetuskan penyerahan borang atau operasi yang berkaitan untuk meningkatkan pengalaman pengguna. Pada masa yang sama, selepas kotak input hilang fokus, pengesahan dan gesaan tertentu boleh dilakukan, seperti mengesahkan sama ada format e-mel adalah betul, dsb.

2. Proses pelaksanaan

1 peristiwa mengikat

Pertama, kita perlu mengikat peristiwa kotak input, anda boleh menggunakan bind() atau on() dalam kaedah jquery untuk mengikat. Dalam artikel ini, kami menggunakan kaedah on().

$(function(){
    $("#input-id").on('blur',function(){
        //触发相关操作，例如表单提交、验证等
    });
})

2. Dapatkan nilai kotak input

Dalam fungsi acara, bagaimana untuk mendapatkan nilai kotak input? Kita boleh menggunakan kaedah val() untuk mendapatkan nilai kotak input. Atas dasar ini, kami boleh melakukan operasi berkaitan, seperti pengesahan.

$(function(){
    $("#input-id").on('blur',function(){
        var inputValue = $(this).val();
        if(inputValue === ""){
            alert("您还未输入任何值！");
        }else{
            //触发相关操作，例如表单提交、验证等
        }
    });
})

3. Sahkan nilai kotak input

Selepas mendapatkan nilai kotak input, kita perlu melakukan pengesahan tertentu pada nilai kotak input. Contohnya, sahkan bahawa e-mel diformat dengan betul. Berdasarkan ini, kita boleh menggunakan ungkapan biasa untuk mengesahkan.

$(function(){
    $("#input-id").on('blur',function(){
        var inputValue = $(this).val();
        if(inputValue === ""){
            alert("您还未输入任何值！");
        }else{
            //验证邮箱格式是否正确
            var regExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
            if(regExp.test(inputValue)){
                //触发相关操作，例如表单提交、验证等
            }else{
                alert("请输入正确的邮箱格式！");
            }   
        }
    });
})

4. Gunakan fungsi nyahlantun

Dalam pembangunan sebenar, kami sering menghadapi masalah kerap mencetuskan peristiwa kotak input. Pada masa ini, menggunakan fungsi nyahlantun boleh mengelakkan situasi ini dengan berkesan. Fungsi fungsi nyahlantun adalah untuk mencetuskan acara yang sama beberapa kali dan melaksanakannya sekali sahaja dalam tempoh masa tertentu, dengan itu mengurangkan bilangan pelaksanaan acara tersebut.

function debounce(fn,delay){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context,args);
        },delay);
    }
}

Apabila menggunakan fungsi nyahlantun, kita hanya perlu membuat pengubahsuaian tertentu pada fungsi acara untuk melaksanakan fungsi nyahlantun.

$(function(){
    var fn = debounce(function(){
        var inputValue = $("#input-id").val();
        if(inputValue === ""){
            alert("您还未输入任何值！");
        }else{
            //验证邮箱格式是否正确
            var regExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
            if(regExp.test(inputValue)){
                //触发相关操作，例如表单提交、验证等
            }else{
                alert("请输入正确的邮箱格式！");
            }
        }
    },500);

    $("#input-id").on('input',fn);
})

3. Ringkasan

Menggunakan jquery untuk menyedari bahawa kotak input kehilangan fokus selepas input boleh meningkatkan pengalaman pengguna dengan berkesan. Semasa proses pelaksanaan, kita perlu melakukan pengikatan peristiwa, mendapatkan nilai kotak input, mengesahkan nilai kotak input, dan menggunakan fungsi nyahlantun. Pada masa yang sama, dalam pembangunan sebenar, isu penyerahan borang juga perlu dipertimbangkan, seperti bagaimana untuk mengelakkan penyerahan borang berulang.

Atas ialah kandungan terperinci kotak input jquery kehilangan fokus selepas input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!