在JQuery中，如何通过鼠标单击选择输入时进行操作？

Question

正如您在下面所看到的，我会在一个公式中选择一些历史地址，所以当我选择一个并按＆＃34;输入＆＃34; 时，颜色会适应（成为绿色，如果它是邮件地址，或保持红色，如果它不是）。我使用这段代码（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");
      }

    });

但问题是如果我点击＆＃34;历史＆＃34;使用鼠标而不是按＆＃34;输入＆＃34;电子邮件地址，没有任何反应（即使我选择了邮件地址）。所以我尝试了其他JQuery函数，如.mouseup()或.click()，但它仍然不起作用。

你有什么想法吗？

Answer 1

试试这个：

ga('send', 'event','fbConnect', 'login');

当元素通过鼠标选择或从选项卡获得焦点时，

$('#selector').focus(function(){ // your code here }); 事件将触发。

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='' />