JQueryでは、マウスクリックで入力を選択するときにアクションを作成する方法は？

Question

下記のように、私が書式で選択した履歴アドレスがいくつかありますので、1つを選択して"Enter"を入力してくださいメールアドレスは緑色になりますそうではない）。私は、コードのこの部分（jQueryの）を使用して、これをしなかった：

$("#mail").keyup(function() { 

    if(!validateEmail($("#mail").val())) { 
     $("div.mail").removeClass("has-success"); 
     $("div.mail").addClass("has-error"); 
    } 
    else{ 
     $("div.mail").removeClass("has-error"); 
     $("div.mail").addClass("has-success"); 
     } 

    }); 

をしかし、私は代わりに「入力」を押すと、マウスで「歴史」のメールアドレスをクリックした場合に問題があり、何も（起こりませんたとえ私がメールアドレスを選んだとしても）。だから私は.mouseup()または.click()のような他のJQuery関数で試しましたが、それでも動作しません。

ご存知ですか？

Answer 1

このお試しください：要素がマウスの選択からまたはタブのいずれかからフォーカスを取得するとき

$('#selector').focus(function(){ 
    // your code here 
}); 

focusイベントが発生します。

Answer 2

あなたがjQuery.change()方法をしようとする場合があります：

$("#mail").change(function() { 

    if(!validateEmail($("#mail").val())) { 
     $("div.mail").removeClass("has-success"); 
     $("div.mail").addClass("has-error"); 
    } 
    else{ 
     $("div.mail").removeClass("has-error"); 
     $("div.mail").addClass("has-success"); 
    } 

}); 

Answer 3

私はblurを使用することをお勧めします。これは、要素がフォーカスを失ったときに発生します。 keyupを使用すると、キーを押すたびに実行されますが、これは実行したくない操作です。

$("#mail").on('blur', function() { 
    if(!validateEmail($("#mail").val())) { 
     $("div.mail").removeClass("has-success"); 
     $("div.mail").addClass("has-error"); 
    } 
    else{ 
     $("div.mail").removeClass("has-error"); 
     $("div.mail").addClass("has-success"); 
    } 
}); 

Answer 4

$(function() { 
 
    $("#mail").on('keyup', function() { 
 

 
    if (!validateEmail($("#mail").val())) { 
 
     $("#mail").removeClass("has-success"); 
 
     $("#mail").addClass("has-error"); 
 
    } else { 
 
     $("#mail").removeClass("has-error"); 
 
     $("#mail").addClass("has-success"); 
 
    } 
 

 
    }); 
 

 
$('input').on('change', function() { 
 

 
    if (!validateEmail($("#mail").val())) { 
 
     $("#mail").removeClass("has-success"); 
 
     $("#mail").addClass("has-error"); 
 
    } else { 
 
     $("#mail").removeClass("has-error"); 
 
     $("#mail").addClass("has-success"); 
 
    } 
 
}); 
 

 
    function validateEmail(email) { 
 
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
 
    return re.test(email); 
 
    } 
 
});

.has-success { 
 
    border-color: green; 
 
} 
 

 
.has-error { 
 
    border-color: red; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<input id='mail' value='' />