在內容可編輯div（特定）獲取當前的div id

我最近正在研究我的一個項目，目前我陷入了一些問題。那麼，我已經做了一個內容可編輯div，用戶可以輸入它的輸入。這個content_editable div包含用戶必須輸入的幾個div。我試圖document.activeElement，但它給我的content_editable DIV不是特定的div和我想的ID second_div 一個知道如何找到content_editable的div具體DIV其中user是type.For例如： -在內容可編輯div（特定）獲取當前的div id

<div contenteditable="true" id="content_editable_div"> 
<div id="first_div"> 
I am the first div 
</div> 
<div id="second_div"> 
I am the second div and i want to know if the focus is on me 
</div> 
</div>

我的Javascript：

window.onload = function() { 
getDivwhohasfocusincontentedtiablediv(); // Something like that 
};

我可以使用jquery，但只能在最後的選擇。我只想使用JavaScript來達到這個目的。請幫我解決這個問題，我沒有找到這個網絡的解決方案（可能是我沒有仔細搜索過）。在此先感謝

來源

2016-02-15 Utkarsh Dixit

所以，你需要什麼到底。 div用戶當前正在輸入什麼內容？ – xAqweRx

@xAqweRx是的。我想知道用戶輸入的具體div。例如，如果div正在編輯具有id的div作爲second_div，我可以知道它 –

您需要事件併爲您定位正確的事件，請在此處查看 - > http://stackoverflow.com/questions/1391278/ contenteditable-change-events –

一個可能的解決方案是貼在每個內部的div事件監聽器監聽「焦點」事件。不過，我發現並非所有元素都會發出「焦點」事件。

JQuery文檔說：在它獲得焦點

焦點事件被髮送到一個元素。此事件隱式適用於有限的一組元素，例如元素（輸入，選擇等）和鏈接（a href）。在近期的瀏覽器版本中，可以通過顯式設置元素的tabindex屬性將事件擴展爲包含所有元素類型。一個元素可以通過鍵盤命令獲得焦點，例如Tab鍵，或者通過鼠標點擊元素獲得焦點。

將tabindex屬性添加到每個內部div將使偵聽焦點事件成爲可能。

例如在JSFiddle。注意：我用JQuery編寫了代碼，但它可以很容易地用JS編寫。

來源

2016-02-15 09:50:06

哦....謝謝，我只是需要。 –

高興得到幫助:) –

得到具體的div 在Javascript中你可以使用

document.getElementById("second_div")

或使用jQuery

$("#second_div")

確保您的ID是獨一無二的。這是在任何瀏覽器中查找obj的最快方法。

現在獲得活躍股利。爲什麼不在點擊或編輯div時放置特定事件。像：

$("#second_div").click (function(){ 
     //raise flag or something 
     currentDiv = "second_div"; 
    })

function getCurrentDiv() 
    { 
     //do something in currentDiv 
    }

，或者嘗試過也探索其他事件如鼠標，當鼠標離開，等

我希望這可以幫助。另外，請詳細說明你的問題，如果我錯過了什麼。

來源

2016-02-15 09:27:32

你錯過了這個問題。問題是 - 如何檢測什麼div用戶正在編輯文本 – xAqweRx

其實問題是如何知道在哪個用戶輸入，最初的點擊沒有打字 –

好吧。謝謝。 ediited：當用戶點擊當前div時，將該div id存儲在一個私有變量中。^_^ –

您可以使用此JS焦點元素，

var focused = document.activeElement;

來源

2016-02-15 09:38:20 Dharmik

再次閱讀問題。有人提到，這種方法不起作用 – xAqweRx

這個怎麼樣，

<div contenteditable="true" id="content_editable_div"> 
    <div id="first_div"> 
    First Div 
    </div> 
    <div id="second_div"> 
    Second Div 
    </div> 
</div> 



$(document).ready(function() { 

    function onMouseUp(e) { 
     console.log(this.id); 
    } 

    document.getElementById("first_div").addEventListener("mouseup", onMouseUp, false); 
    document.getElementById("second_div").addEventListener("mouseup", onMouseUp, false); 
});

Demo Here JS FIDDLE

來源

2016-02-15 09:53:43

在內容可編輯div（特定）獲取當前的div id

回答

相關問題