0

更新

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

所以我有这段代码，它有一个由服务器生成的输入 html，所以我不能直接onblur=function()在标签中做。相反，我使用 的onclick事件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即使输入元素不再是焦点，我只是单击屏幕中的随机区域。我是不是误解了什么？有没有比w3school、developer.mozilla和这个奇怪的定义更好的定义？

编辑

我试图创建一个 JSfiddle（没有服务器的东西）来演示，它工作得很好，所以经过仔细检查，我发现输入元素不是unfocus. 在文本区域中单击光标的位置无关紧要，现在没有其他元素可以成为焦点。

编辑 2

根据JSFiddle的要求，但它在这里工作，但不适用于服务器端的东西

4

3 回答 3

2

这是一个工作小提琴：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 帮助器，并将类属性的命名方式更改为使用 @ 转义小写名称“类”。

于 2013-11-05T00:29:28.943 回答
-1

请尝试这种方法：

<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");
    }


})

注意：未经测试

于 2013-11-05T00:17:26.600 回答
-2

你应该使用 $(this)

var inputVal = $(this).val();
于 2013-11-04T23:53:47.983 回答