Mettre l'accent sur l'élément div contenteditable

Question

J'ai un <div contenteditable=true> où je définit par un WYSIWYG certains éléments. Par exemple <p>,<h1>, etc. Je voudrais mettre directement l'accent sur l'un de ces éléments.

Par exemple sur <p id="p_test">. Mais il semble que la fonction focus() ne fonctionne pas sur les éléments <div> <p>...

Existe-t-il un autre moyen de définir l'objectif dans mon cas ?

Answer 1

Old post mais aucune des solutions n'a fonctionné pour moi. J'ai fini par comprendre :

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

Answer 2

Dans les navigateurs modernes, vous pouvez utiliser :

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

Mais si votre élément est vide j'ai quelques problèmes étranges donc pour les éléments vides vous pouvez le faire :

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

Après la suppression, le curseur nbsp reste à l'intérieur de l'élément p

P.S. juste l'espace ordinaire ne fonctionne pas pour moi

Answer 3

J'ai remarqué que jQuery focus() ne fonctionnait pas pour ma DIV contenteditable avec largeur et hauteur de 0. Je l'ai remplacé par .get(0).focus() - la méthode native de focus javascript - et ça marche.

Answer 4

Beaucoup de fois si vous ne pouvez pas appeler .focus() sur un élément, c'est parce que tabIndex est -1, ce qui signifie que la touche tab ne peut pas se concentrer dessus lorsque vous appuyez sur tab pour naviguer.

Changer votre tabIndex à >= 0 vous permettra de vous concentrer sur les éléments. Si vous avez besoin de le faire dynamiquement, vous pouvez simplement ajouter un tabindex >= 0 à votre élément dans l'écouteur d'événements.

Answer 5

Vous pouvez essayer ce code, il peut se focaliser automatiquement dans votre dernier emplacement d'insertion.

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)