如何觸發焦點事件
[英]How to trigger focusout event
問題描述
我有一個聚焦活動
$('.alpha').on("focusout", function () {...});
我想從代碼的其他地方觸發它。
我嘗試了$('#input12').focus().blur(); 並且還嘗試了$('#input12').trigger("focusout")
編輯：我正在使用動態生成的元素。
但那里沒有運氣...
元素#input12具有類名稱alpha因此我希望觸發focusout事件。
有什么辦法可以完成嗎？
這是我嘗試執行https://jsfiddle.net/jnmnk68d/時的jsfiddle示例
5 個解決方案
解決方案1
1 2017-10-23 14:29:13
在jQuery元素上使用[0]是可行的！ kontrollanten選項也適用！ 並在focusout上進行正常觸發！
$(".alpha").on("focusout", function(e){ console.log(e.type, true); }); //option 1 $('#input12')[0].focus(); //vanilla $('#input12')[0].blur(); //vanilla //option 2 $('#input12').trigger('focusout'); //option 3 $('#input12').trigger('blur');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="alpha" id="input12" />
解決方案2
1 已采納 2017-10-23 14:42:03
您需要將事件委托給非動態父元素。
在這個例子中，我們監聽focusout對有關事件的form但只有當事件的目標選擇（在這種情況下匹配的火我們的函數".alpha" ）。 這樣，可以在現在或將來匹配的任何元素上觸發事件。
$("form").on("focusout", ".alpha", function() {
console.log("focusout happened!");
});
這是一個完整的演示，使您可以查看如何使用委派事件來在動態插入的內容上觸發事件。
$(function() { $("form").on("focusout", ".alpha", function(e) { console.warn("focusout triggered on " + e.target.outerHTML); }); //example trigger //click the link to trigger the event $("a").on("click", function(e) { e.preventDefault(); $("#input12").trigger("focusout"); }); //demo injecting content //click the create button then focus out on the new element to see the delegated event still being fired. var i = 12; $("form").on("submit", function(e) { e.preventDefault(); var id = "input" + (++i); $(this).find("fieldset").append("<input id='" + id + "' class='alpha' placeholder='" + id + "' />"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <fieldset> <input id="input12" class="alpha" placeholder="input12" /> <input type="submit" value="create new" /> </fieldset> </form> <a href="#">trigger on input12</a>
解決方案3
0 2017-10-23 14:30:28
這是一個取自jQuery文檔的工作示例。
var focus = 0, blur = 0; $("p") .focusout(function() { focus++; $("#focus-count").text("focusout fired: " + focus + "x"); })
.inputs { float: left; margin-right: 1em; } .inputs p { margin-top: 0; }
<html lang="en"> <head> <meta charset="utf-8"> <title>focusout demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div class="inputs"> <p> <input type="text"><br> <input type="text"> </p> </div> <div id="focus-count">focusout fire</div> </body> </html>
也許如果您添加完整的代碼，我可以為您提供更好的幫助嗎？
希望這可以幫助！
解決方案4
0 2017-10-23 14:30:51
看到此代碼，它將在焦點發生1秒后調用focusout。
$('.alpha').on("focusout", function() { console.log('FOCUSOUT!'); }); $('.alpha').on("focus", function() { var self = $(this); window.setTimeout(function() { self.focusout(); }, 1000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input type="text" class="alpha" />
解決方案5
0 2017-10-23 15:43:54
我發現了我的代碼似乎有問題。首先，我將事件更改為使用委托，並將其連接到非動態元素（未動態添加的元素），如此處建議的那樣。 我還需要在setTimeout內部調用觸發函數，因為事實證明渲染動態添加的元素需要花費一些時間，因此使用setTimeout可以解決問題。
謝謝大家的幫助！
使用鍵盤選擇onchange - 在焦點輸出之前不要觸發onchange事件？
[英]Select onchange with keyboard - do not trigger onchange event until focusout?
focusout 事件不會通過角度組件中的選項卡按鈕觸發
[英]focusout event does not trigger with tab button in angular component
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.