Siehe, ob ContentEditable div Fokus hat

Ich versuche zu überprüfen, ob ein contenteditable div Fokus hat, aber ich habe einige Probleme. Hier ist mein Code so weit:Siehe, ob ContentEditable div Fokus hat

if ($("#journal-content:focus")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

Das Problem ist, ist es immer wiederkehrende „Hat konzentrieren“, auch wenn dies nicht der Fall. Was ist der beste Weg, dies zu tun?

Update: Der Grund, dies zu tun ist, um zu sehen, ob die Cursor an der gewünschten Stelle sind vor das neue Element eingefügt wird. Andernfalls, wenn die letzte Stelle, auf die der Benutzer geklickt hat, in der Kopfzeile war, wird die Auswahl mit Rangy wiederhergestellt und durch ein neues Element ersetzt. Ich brauche einen Weg, um herauszufinden, ob der contenteditable div fokussiert ist/den Cursor in sich hat, also wenn nicht, füge ich einfach das Element an, das ich am Ende einfüge.

Update 2: Hier ist ein JSFiddle illustriert mein Problem: http://jsfiddle.net/2NHrM/

Quelle

2012-03-30 Adam

Check out mein Update unter Oder: – iambriansreed

Haben Sie jemals eine Lösung finden? – iambriansreed

Ich habe die Fiddle mit @ iambriansreed's Antwort aktualisiert, so dass es funktioniert. – Irwin

Versuchen:

if ($("#journal-content").is(":focus")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

Oder:

window.contenteditable_focused = false; 

$("#journal-content").focus(function() { 
    //alert("Has Focus"); 
    contenteditable_focused = true; 
}); 
$("#journal-content").blur(function() { 
    //alert("Doesn't Have Focus");   
    contenteditable_focused = false; 
});

prüfen contenteditable_focused bevor das Skript ausgeführt wird.

Oder:

if ($(document.activeElement).is("#journal-content")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

Quelle

2012-03-30 02:46:23 iambriansreed

Hmm das macht das Gegenteil, gibt immer "hat keinen Fokus" ... – Adam

Dann hat es keinen Fokus. – iambriansreed

... aber es tut. Gleich danach verwende ich Rangy, um die Auswahl zu speichern, was gut funktioniert. – Adam

Sie können versuchen, diese

if ($("#journal-content").is(":focus")) { 
...

Vielleicht, wenn Sie uns sagen werde, was Sie versuchen zu erreichen, werden wir eine weitere Hilfe sein. In der Zwischenzeit können Sie hier lesen: http://api.jquery.com/focus-selector/.

Quelle

2012-03-30 02:54:02

Alrighty, aktualisiert meinen ursprünglichen Beitrag mit einer Erklärung von dem, was ich versuche zu tun. (Ich habe es versucht und es scheint nicht zu funktionieren). – Adam

Wenn Sie dem Link folgen, den ich gepostet habe, sehen Sie Folgendes: _Wenn Sie nach dem aktuell fokussierten Element suchen, wird $ (document.activeElement) es abrufen, ohne dass der gesamte DOM-Baum durchsucht werden muss._ –

Was ist das ?:

if (document.activeElement.isContentEditable) { 
... 
}

Ich weiß nicht, wie gut Browser-Unterstützung für diese, aber zumindest ist Chrome und Firefox unterstützen.

Quelle

2013-08-14 15:03:14 Riesling

Wäre nicht Arbeiten Sie überhaupt mit mehreren contentEditable Elementen. – diegoreymendez

Für reine JavaScript, wenn Sie mehrere contenteditable Elemente haben:

Die CSS und Markup dienen lediglich dem Snippet

Versuchen Sie das Snippet und drücken entweder Element ausgeführt wird.

function isFocused() { 
 
    if (document.activeElement.id == "journal-content") { 
 
    alert("Focused!"); 
 
    } else { 
 
    alert("Not focused :("); 
 
    } 
 
}

#journal-content { 
 
    background-color: #eee; 
 
} 
 
#not-journal-content { 
 
    background-color: #ccc; 
 
}

<div id="journal-content" contenteditable="true" onclick="isFocused()">Journal Content</div> 
 
<div id="not-journal-content" contenteditable="true" onclick="isFocused()">Not Journal Content</div>

Quelle

2015-09-20 01:35:26

Siehe, ob ContentEditable div Fokus hat

Antwort

Verwandte Themen