2010-03-05 16 views
45

Ho un <div contenteditable=true> dove definisco alcuni elementi da un WYSIWYG. Ad esempio <p>, <h1>, ecc. Vorrei mettere direttamente l'attenzione su uno di questi elementi.Impostare lo stato attivo sull'elemento contented div

Ad esempio su <p id="p_test">. Ma sembra che la funzione focus() non funzioni sugli elementi , elementi <p> ...

C'è un altro modo per definire l'attenzione nel mio caso?

+5

Non è possibile mettere a fuoco un div o p poiché non ci sono azioni per esso, per cosa si sta cercando di mettere a fuoco? –

+2

qualcuno sa ancora come farlo? –

+45

@NickCraver la domanda menziona il suo contenuto modificabile, il che significa che puoi digitare e modificarlo, ecc.domanda perfettamente valida imo – Blowsie

risposta

-6

Associare un gestore di eventi "click" a tutti gli elementi all'interno del div contenteditable e modificare la classe/lo stile al clic (ad esempio aggiungere classe "focused" all'elemento);

È possibile identificare, per l'utente, quale elemento è attivo aggiungendo lo stile come un bordo colorato o un'ombra di riquadro interna. Poi, quando si desidera accedere all'elemento focalizzato nello script jQuery, basta fare qualcosa di simile:

var focused = $('.focused');

+6

Chiede di spostare effettivamente il punto di accesso dell'utente all'elemento, non solo lo styling degli elementi selezionati. –

+0

Questo non è di alcun aiuto. –

26

ho notato che jQuery messa a fuoco() non ha funzionato per il mio DIV contenteditable con larghezza e altezza pari a 0. L'ho sostituito con .get (0) .focus() - il metodo nativo di javascript focus - e funziona.

+2

Quale browser? Non sembra funzionare in Safari, ma Firefox e Chrome lo gestiscono bene. –

+2

Questo è FANTASTICO! Grazie per aver capito questo e condividere! – Rogala

+0

qualche idea su come questo potrebbe funzionare in vanilla js? –

23

nei browser moderni è possibile utilizzare:

var p = document.getElementById('contentEditableElementId'), 
    s = window.getSelection(), 
    r = document.createRange(); 
r.setStart(p, 0); 
r.setEnd(p, 0); 
s.removeAllRanges(); 
s.addRange(r); 

Ma se il vostro elemento è vuoto ho avuto alcuni problemi strani così per elementi vuoti si può fare questo:

var p = document.getElementById('contentEditableElementId'), 
    s = window.getSelection(), 
    r = document.createRange(); 
p.innerHTML = '\u00a0'; 
r.selectNodeContents(p); 
s.removeAllRanges(); 
s.addRange(r); 
document.execCommand('delete', false, null); 

Dopo l'eliminazione del cursore nbsp resta all'interno dell'elemento p

PS solo spazio ordinario non funziona per me

+5

qual è la variabile p nei tuoi esempi? –

+2

@BT presumo che sia l'elemento radice P, anche se avrebbe dovuto chiarirlo senza lasciare spazio ai dubbi. –

+0

Fuori dalla moltitudine di soluzioni suggerite là fuori, questo è l'unico che ha funzionato per me, per permettermi di focalizzare l'attenzione su un div contentedit all'interno di una finestra di dialogo jquery. –

3

Nel caso in cui qualcuno, che usa MediumEditor che gestisce contenteditable elemento, inciampa su questo problema, il seguente ha funzionato per me:

editor.selectElement(editorDOMNode); 
  1. editor è un'istanza di MediumEditor.
  2. editorDOMNode è un riferimento al nodo DOM effettivo contenteditable.
  3. E 'anche possibile mettere a fuoco un nodo figlio specifico all'interno l'editor come segue:

    editor.selectElement(editorDOMNode.childNodes[0]); 
    
19

Vecchio post, ma nessuna delle soluzioni lavorato per me. Alla fine ho pensato:

var div = document.getElementById('contenteditablediv'); 
setTimeout(function() { 
    div.focus(); 
}, 0); 
+0

non so perché, questo funziona completamente !!! avvolgere la logica .focus() in setTimeout ha fatto il trucco !! Grazie! – sga4

+0

@ sga4 Sono contento che l'abbia aiutato :) – chris97ong

+0

Bello! Alcune cose devono tornare allo scheduler prima che possano essere correttamente manipolate. I browser sono strani. Grazie! –

1

Puoi provare questo codice, può mettere a fuoco automaticamente nell'ultima posizione di inserimento.

let p = document.getElementById('contenteditablediv') 
let s = window.getSelection() 
let r = document.createRange() 
r.setStart(p, p.childElementCount) 
r.setEnd(p, p.childElementCount) 
s.removeAllRanges() 
s.addRange(r) 
Problemi correlati