Onblur到处触发

Question

更新

似乎输入是锁定的，直到我输入一个格式良好的电子邮件地址，然后，只有这样，元素才能解锁/脱离焦点。这很奇怪，因为如果我不能聚焦任何其他元素，那么当当前元素仍然是焦点时，如何触发unfocus事件。那么，您认为这与服务器端的某件事有关吗？

所以我有一段代码，它有一个由服务器生成的输入html，所以我不能直接在标记中执行onblur=function()。相反，我使用td的td事件将事件处理程序绑定到输入。

<td id="emailInput" class="label" onclick="emailValidation(event);">
   @Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})                        
</td>
<td id="emailValidate" style="display: none">
   <label>Please enter a valid email address</label> 
</td>  

在Javascript文件中，我将事件处理程序绑定如下：

function emailValidation(e) {
  $(e.target).on("blur", function () {        
    console.log("what target e is");
    console.log(e.target);
    var inputVal = $(e.target).val();        
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $(e.target).focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
  }); 
}

我检查了开发控制台，e.target是我想要的输入元素。正在发生的情况是，即使输入元素不再是焦点，但在被追加后被触发的onblur事件是unfocus，而且我只是单击屏幕上的随机区域。我是不是误会什么了？是否有比the w3school、the developer.mozilla和这个奇怪的更好的定义？

编辑

我试图创建一个JSfiddle (w/o服务器)来演示，它工作得很好，所以仔细检查一下，我发现输入元素不是unfocus。在文本区域中单击光标的位置并不重要，现在没有其他元素可以聚焦。

编辑2

按照JSFiddle的要求，但是它在这里工作，但不适用于服务器端的

Answer 1

下面是一个有用的小提琴：http://jsfiddle.net/Mn5E4/1/

$("#emailMe").on("blur", function () {   
    var inputVal = $(this).val();       
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $("#emailMe").focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
});

您不必费心使用click事件来附加处理程序，因为您知道要绑定到的输入的id。

编辑:请注意，这是您的jsFiddle的分叉。根据问题中的代码，我希望所需输入元素的id为"EmailAddress"，在这种情况下，您将$("#emailMe")替换为$("#EmailAddress")。

Edit2:您可以通过这样做来消除任何猜测：

<td id="emailInput" class="label">
   @Html.EditorFor(model => Model.EmailAddress, new { @class = "ignore validateEmail"})                        
</td>
<td id="emailValidate" style="display: none">
   <label>Please enter a valid email address</label> 
</td>
<script type='text/javascript'>
$(".validateEmail").on("blur", function () {   
    var inputVal = $(this).val();       
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $(".validateEmail").focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
});
</script>

请注意，我将另一个类传递给EditorFor助手，并更改了类属性的命名方式以使用@来转义小写名称" class“。

Answer 2

请试试这个：

<td id="emailInput" class="label" onclick="emailValidation(event);">
   @Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})                        
</td>

 $("#emailInput").on('focusin', "input", function (e) {

    var inputobj = $(this);

        var inputVal = inputobj.val(); 

    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        inputobj.focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }


})

说明：未测试

Answer 3

您应该使用$(这个)

var inputVal = $(this).val();