.focus（）不關注新元素

我有一個重命名某些div的函數。我試圖得到它的工作方式是這樣的：.focus（）不關注新元素

用鼠標右擊格
用戶單擊「重命名」上下文菜單上
事業部得到一個input元素，並自動聚焦
按輸入或點擊屏幕後輸入提交

我有大部分的步驟完成，但輸入元素沒有被點擊後，我點擊'重命名'。下面的代碼：

function Rename(){ 
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>"; 
    ClickedFile.childNodes[0].focus(); 
}

的ClickedFile是，是正確點擊的節點。更改innerHTML工作正常，但.focus（）不，我不知道爲什麼。我也沒有在控制檯上發現任何錯誤。

我也嘗試使用：

ClickedFile.childNodes[0].select(); 
ClickedFile.childNodes[1].focus(); 
ClickedFile.focus();

他們都沒有工作過。

編輯：

我知道使用JQuery可能有幫助，但我更感興趣的是找出爲什麼這是行不通的。
我修復了這個問題。它與事件處理程序有關。我的答案張貼在下面。

來源

2013-05-13 tay10r

@tadman jQuery？這到底是什麼？這就像說*爲什麼你首先不使用CodeIgniter。它很難得到錯誤。* – 2013-05-13 21:36:36

你似乎對我很好[這裏]（http://jsbin.com/epeyoy/1/）。 – 2013-05-13 21:41:00

我沒有使用它，以便更好地理解純JavaScript。我真的不想在這裏辯論是否我應該使用jQuery – tay10r 2013-05-13 21:41:00

原因是，因爲您立即調用選擇和焦點方法。瀏覽器沒有機會插入元素，所以它不是DOM的一部分。

一個快速和骯髒的解決方案是使用setTimeout -function以0毫秒的值：

function Rename(){ 
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>"; 
    setTimeout(function(){ClickedFile.childNodes[0].focus();}, 0); 
}

這將導致瀏覽器做它必須做的一切，然後再運行你傳遞給函數在setTimeout

下小提琴顯示工作狀態的例子：http://jsfiddle.net/Kennethtruyers/fX8h6/

來源

2013-05-13 21:34:45 Kenneth

哦，對不起，我沒有提到我從類似問題中看到的那樣。沒有太大的幫助 – tay10r 2013-05-13 21:36:27

在做這件事之前，innerHTML有什麼價值？你確定它不會破壞你的textnox嗎？ – Kenneth 2013-05-13 21:37:31

innerHTML之前只是一個文件名（即

testFile.c

– tay10r 2013-05-13 21:45:30

你必須添加元素的DOM

的一部分

var input = document.createElement("input"); 
input.className = "Rename"; 
input.type = "text"; 

document.getElementById("somenode").appendChild(input); 
input.focus(); // should work now

看到the fiddle

來源

2013-05-13 21:35:24

我不確定爲什麼，但它仍然無法工作，我可能會發布更多代碼如果我不能工作 – tay10r 2013-05-13 21:44:18

@TaylorFlores檢查我的更新的答案中的小提琴。爲我工作。 – 2013-05-13 21:46:51

是的，它的工作原理，但我有問題在我的網頁上使用它。我會很快發佈小提琴 – tay10r 2013-05-13 21:48:24

我通過改變重命名要在「鼠標鬆開」引發的div而不是「鼠標按下」功能解決了這一問題。

我認爲這是造成問題的原因是因爲Rename（）函數在mousedown上被觸發，導致焦點在'mousedown'期間被設置，但contextmenu直到'mouseup'才被隱藏。

我無法確認這是原因，但我確實知道在將'mousedown'更改爲'mouseup'後，代碼在Rename（）的觸發器中起作用。

來源

2013-05-14 00:42:18 tay10r

我覺得有點不好，因爲沒有人可以回答這個問題，因爲我沒有發佈整個代碼。對於那個很抱歉！ – tay10r 2013-05-14 00:46:21

感謝您花時間發佈您的解決方案。 – RichieHindle 2013-05-14 07:05:24

.focus（）不關注新元素

回答

相關問題