jquery入力ボックスは入力後にフォーカスを失います-フロントエンドQ&A-php.cn

jquery入力ボックスは入力後にフォーカスを失います

王林

リリース： 2023-05-18 18:47:08

オリジナル

1626 人が閲覧しました

フロントエンドテクノロジの継続的な開発により、jquery は多くの Web 開発において不可欠なツールになりました。その中でも入力ボックスの利用は避けられず、ユーザーの入力完了後、どのように関連する操作をトリガーしてユーザーの操作をより便利にするかがフロントエンド開発者にとって考慮すべき課題となっています。この記事では、入力後に入力ボックスがフォーカスを失うことをjqueryを使って実現する方法を紹介します。

1. 要件

フォーム入力ボックスへの入力が完了すると、ユーザーエクスペリエンスを向上させるためにフォーム送信または関連操作がトリガーされます。同時に、入力ボックスがフォーカスを失った後、電子メール形式が正しいかどうかの確認など、特定の確認とプロンプトを実行できます。

2. 実装プロセス

1. イベントのバインド

まず、入力ボックスのイベントをバインドする必要があります。バインドする jquery メソッド。この記事では、on() メソッドを使用します。

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

ログイン後にコピー

2. 入力ボックスの値を取得する

イベント関数で、入力ボックスの値を取得するにはどうすればよいでしょうか? val() メソッドを使用して、入力ボックスの値を取得できます。これに基づいて、検証などの関連操作を実行できます。

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

ログイン後にコピー

3. 入力ボックスの値を確認する

入力ボックスの値を取得した後、入力ボックスの値に対して特定の確認を実行する必要があります。たとえば、電子メールの形式が正しいことを確認します。これに基づいて、正規表現を使用して検証できます。

$(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. デバウンス機能を使用する

実際の開発では、入力ボックスのイベントが頻繁に発生するという問題に遭遇することがよくあります。このとき、デバウンス機能を使用すると、この状況を効果的に回避できます。デバウンス機能の機能は、同じイベントを複数回トリガーし、一定時間内に 1 回だけ実行することで、イベントの実行回数を減らすことです。

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

ログイン後にコピー

デバウンス関数を使用する場合、イベント関数に特定の変更を加えるだけでデバウンス関数を実現できます。

$(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. 概要

jquery を使用して、入力後に入力ボックスがフォーカスを失うことを認識すると、ユーザーエクスペリエンスを効果的に向上させることができます。実装プロセスでは、イベントバインディングを実行し、入力ボックスの値を取得し、入力ボックスの値を確認し、デバウンス関数を使用する必要があります。同時に、実際の開発においては、フォームの重複送信を防ぐ方法など、フォームの送信に関する問題も考慮する必要があります。

以上がjquery入力ボックスは入力後にフォーカスを失いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。