In JQuery, wie Sie eine Aktion ausführen, wenn Sie eine Eingabe mit einem Mausklick auswählen?

Question

Wie Sie unten sehen können, gibt es einige historische Adressen, die ich chan in einem Formular auswähle. Wenn ich also eins auswähle und "Enter" drücke, wird die Farbe angepasst (grün, wenn es eine Mailadresse ist, oder rot bleiben, wenn es ist nicht). Ich habe diese mit diesem Stück Code (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"); 
     } 

    }); 

Aber das Problem ist, wenn ich mit der Maus, um die „Geschichte“ E-Mail-Adresse klicken Sie anstelle von „Enter“ drücken, passiert nichts (auch wenn ich die Mailadresse wähle). Also habe ich mit anderen JQuery-Funktionen wie .mouseup() oder .click() versucht, aber es funktioniert immer noch nicht.

Haben Sie eine Idee?

Answer 1

Versuchen Sie folgendes:

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

focus Ereignis ausgelöst wird, wenn das Element den Fokus erhalten entweder von der Maus Auswahl oder aus Tab.

Answer 2

Sie könnten die jQuery.change() Methode versuchen wollen:

$("#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

Ich empfehle blur Verwendung würde. Dies wird ausgelöst, wenn das Element den Fokus verliert. Die Verwendung von keyup wird jedes Mal ausgelöst, wenn eine Taste gedrückt wird, was nicht das ist, was Sie tun möchten.

$("#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='' />