在輸入標籤上使用自動聚焦屬性時，不會調用onfocus

在以下示例中，我只獲得一個警告框。我讀到焦點放在JavaScript代碼執行之前。有沒有辦法讓這個工作？在輸入標籤上使用自動聚焦屬性時，不會調用onfocus

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
document.getElementById('i').addEventListener('focus', function() { 
    alert(2); 
}, false); 
</script>

（我只在Safari中測試了這個）

編輯：我能明顯地做這種方式（Prototypejs選擇）：

var autofocusElement = $$('input[autofocus]')[0]; 
callListener(autofocusElement);

但相比只會增加它看起來醜陋一個事件監聽器。

編輯：

不要擔心在缺乏自動對焦屬性瀏覽器的支持。它很容易解決，正如我在下面的鏈接中所做的那樣。正如我所見，這也是最好的解決方案。我的問題是，如果我可以做到這一點，而不必手動調用監聽器。

http://jsfiddle.net/tellnes/7TMBJ/3/

它工作正常，在Firefox 3.6中，因爲Firefox不支持自動對焦。但在支持自動對焦的Safari中，並不是所謂的事件。

來源

2010-12-05 Christian Tellnes

錯誤的小提琴鏈接？ – Rahul 2016-04-06 11:44:21

@Rahul看起來像我已經更名爲我的jsfiddle用戶名，因爲這是張貼。我更新了鏈接。 – 2016-04-12 14:05:57

從HTML5 working draft：

不能有與指定的 autofocus屬性文件在多於一個元件。

無論如何，你要求的是未定義的行爲。

只有一個autofocus元素，在Firefox 3.6下，沒有一個處理程序在加載頁面時被調用。手動將焦點放在元素上會調用這兩個處理程序（然後進入無限循環，這是由於警告框在關閉時將焦點返回給元素）。

HTML5的草案並說，autofocus應該在頁面加載執行focusing steps，包括提高focus事件，但機會是瀏覽器目前尚未實現該功能在一個完整的或一致的方式。

您可能希望在頁面加載期間顯式調用focus事件處理函數，直到HTML5規範完成並且瀏覽器開始瞄準以獲得完整支持爲止。

來源

2010-12-05 19:01:33

問題是我沒有得到第二個事件。這只是我的測試代碼有兩個輸入元素。已經更新了代碼。 – 2010-12-05 19:07:16

-1

如果您需要爲任何input執行一段javascript代碼，onfocus，你可以使用jQuery：http://api.jquery.com/focus/

來源

2010-12-05 19:08:51 matthewpavkov

從當前例如下面的代碼：

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
    document.getElementById('i').addEventListener('focus', function() { 
     alert(2); 
    }, false); 
</script>

將會引起警報從1去的無限循環到2

[eidt]

，因爲：（出現這種情況僅在支持autofocus broswers）

輸入獲得自動對焦，觸發事件時觸發警報，警報爭奪焦點，點擊確定，輸入爭奪焦點，焦點事件，觸發新的事件現在觸發兩種不同的警報（DOM完全加載，所以新事件添加了另一個警報），這兩個警報抓住焦點，點擊確定，點擊確定，輸入抓鬥焦點觸發新事件現在觸發兩個不同的警報，警報抓鬥焦點，點擊確定，下一個警報抓鬥焦點，點擊確定，輸入焦點焦點，觸發兩個事件，警告抓鬥焦點，點擊確定，下一個警報抓鬥焦點，點擊確定，輸入抓鬥焦點，觸發兩個事件，警報抓鬥焦點，點擊確定，下一個警報抓鬥焦點，點擊確定，輸入抓住焦點，觸發兩個事件，警戒抓取焦點，點擊確定，下一個警報抓取焦點，點擊確定，輸入焦點焦點，觸發兩個事件，輸入gra bs焦點，觸發兩個事件，警戒抓取焦點，點擊確定，下一個警報抓取焦點，點擊確定，輸入焦點焦點，觸發兩個事件，輸入焦點焦點，觸發兩個事件，警報抓取焦點，點擊確定，點擊確定，輸入抓取焦點，觸發兩個事件，輸入焦點焦點，觸發兩個事件，警報抓取焦點，點擊確定，下一個警報抓鬥焦點，點擊確定，輸入抓鬥焦點，觸發這兩個事件...

文字說明一個無限過程的FTW！....？：P

[/編輯]

在你前面有兩個自動焦點例子應用似乎是最後一個將在我已經在底部連接的例子來執行。我還添加了一種基於類名添加焦點事件到每個輸入的方式......不知道你是否在尋找，但它可能有一些幫助。

JSFiddle Example of onfocus event

來源

2010-12-05 19:24:56 subhaze

你需要給的值進行自動對焦。
<input id="i" type="text" onfocus="alert(1)" autofocus="">

來源

2018-01-30 09:44:21 Yuu

在輸入標籤上使用自動聚焦屬性時，不會調用onfocus

回答

相關問題