Vedere se ContentEditable div ha lo stato attivo

Sto tentando di verificare se un div contenteditabile ha il focus, ma ho qualche problema. Ecco il mio codice finora:Vedere se ContentEditable div ha lo stato attivo

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

Il problema è, è sempre tornando "ha il focus", anche quando non è così. Qual è il modo migliore per farlo?

Update: Il motivo per fare questo è quello di vedere se il cursore si trova nella posizione desiderata prima di inserire il nuovo elemento. Altrimenti, se l'ultimo posto che l'utente ha fatto clic era nell'intestazione, quando ripristino la selezione con Rangy e lo sostituisco con un nuovo elemento, finisce nell'intestazione. Ho bisogno di un modo per scoprire se il div contenteditable è focalizzato/ha il cursore in esso, quindi se no, aggiungerò semplicemente l'elemento che sto inserendo alla fine.

Aggiornamento 2: Ecco una JSFiddle che illustra il mio problema: http://jsfiddle.net/2NHrM/

fonte

2012-03-30 Adam

Guarda il mio aggiornamento sotto Oppure: – iambriansreed

Hai mai trovato una soluzione? – iambriansreed

Ho aggiornato il Fiddle usando la risposta di @ iambriansreed qui sotto in modo che funzioni. – Irwin

Prova:

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

Oppure:

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; 
});

Controllare contenteditable_focused prima di eseguire lo script.

Oppure:

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

fonte

2012-03-30 02:46:23 iambriansreed

Hmm che fa l'opposto, restituisce sempre "non ha il focus" ... – Adam

Quindi non ha il focus. – iambriansreed

... ma lo fa. Subito dopo sto usando Rangy per salvare la selezione, che funziona bene. – Adam

Si può provare questo

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

Forse se ci dirai che cosa stai cercando di raggiungere saremo di più aiuto. Nel frattempo, puoi leggere qui: http://api.jquery.com/focus-selector/.

fonte

2012-03-30 02:54:02

Alrighty, aggiornato il mio post originale con una spiegazione di ciò che sto tentando di fare. (Ho provato il tuo e non sembra funzionare). – Adam

Se segui il link che ho postato vedrai questo: _Se stai cercando l'elemento attualmente focalizzato, $ (document.activeElement) lo recupererà senza dover cercare l'intero albero DOM._ –

Che dire di questo ?:

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

non so quanto bene del browser il supporto per questo è, ma almeno Chrome e Firefox supportano.

fonte

2013-08-14 15:03:14 Riesling

Non lo farebbe funziona affatto con più contenuti. Elementi editabili. – diegoreymendez

Per puro JavaScript quando si dispone di più elementi: contentEditable

Il CSS e Markup è puramente per il frammento di

Provare a eseguire il frammento e premendo uno dei due elementi.

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>

fonte

2015-09-20 01:35:26

Vedere se ContentEditable div ha lo stato attivo

risposta

Problemi correlati