的onblur觸發無處不

看來，輸入被鎖定，直到我輸入一個正確格式的電子郵件地址，然後，然後才能夠被解鎖/無焦點的元素。這太奇怪了，因爲如果我不能聚焦任何其他元素，那麼噹噹前元素仍然是焦點時，未聚焦事件如何觸發。你認爲它必須與服務器端的東西有關嗎？

所以我有這樣的一段代碼，具有由服務器生成的，所以我不能直接做標記中的onblur=function()輸入HTML。相反，我使用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][email protected][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（W/O服務器的東西）來證明，它工作得很好所以細看檢查我看到輸入元素沒有被忽略。單擊遊標的位置並不重要，我們現在沒有其他元素可以聚焦。

編輯2

按要求JSFiddle，但它在這裏工作，但不能在一個與服務器端的東西

來源

2013-11-04 Jack Thor

在您點擊''後，您的輸入是否生成？你的輸入是否在''內？向我們展示小提琴。 'event.target'是生成事件的目標。 – PHPglue

@PHPglue我以爲也是這樣，但看着console.log它是輸入元素而不是目標的td元素 –

由於您的輸入位於''標籤內。它也可以成爲目標。 – PHPglue

這裏是工作提琴： http://jsfiddle.net/Mn5E4/1/

$("#emailMe").on("blur", function() { 
    var inputVal = $(this).val();  
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9][email protected][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」，在這種情況下，你會用$（「＃EmailAddress」）替換$（「＃emailMe」）。

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][email protected][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-05 00:29:28 devinallenaz

問題是我沒有參考輸入元素，因爲它是由服務器在運行時生成的，我相信。 –

這是真的，但它有一個可預測的ID。 ASP.NET MVC將使用模型屬性的名稱作爲元素的ID。查看我編輯的預期編號。 – devinallenaz

我檢查了開發者控制檯，並且在生成元素時已經分配了一個id。我已經嘗試給它一個ID手動沒有工作，我可以在另一方面可以找出它創建後的元素id是什麼，並在我的jQuery使用，但覺得這有點hackish，如果他們在哪裏更新插件和命名約定改變它會破壞我的代碼。但是，如果這是唯一的方式，那麼我可能必須這樣做。 –

-2

你應該使用$（本）

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

來源

2013-11-04 23:53:47 Alex

沒有工作，我注意到一些事請看我的編輯上面。 –

-1

請嘗試這個aproach：

<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][email protected][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-05 00:17:26 Sandcar

我得到一個'未捕獲的RangeError：超過最大調用堆棧大小' –

的onblur觸發無處不

回答

相關問題