Question

更新

看来输入被锁定，直到我输入格式正确的电子邮件地址，然后才能解锁/取消焦点。这很奇怪，因为如果我无法聚焦任何其他元素，那么当当前元素仍然是焦点时，如何触发非聚焦事件。你认为它与服务器端的某些东西有关吗？

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

<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事件在被附加后被触发并且输入是无焦点，即使输入元素不再是焦点，我只是点击屏幕中的随机区域。我错误地忽略了什么吗？我可以获得比the w3school，the developer.mozilla和this weird one

更好的定义吗？

修改

我正在尝试创建一个JSfiddle（没有服务器的东西）来演示并且它工作得很好所以仔细检查后我看到输入元素没有失焦。单击光标保留在文本区域中的位置无关紧要，现在没有其他元素可以对焦。

修改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属性的命名方式，以使用@来转义小写名称“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

你应该使用$（this）

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

Onblur到处触发

3 个答案: