web-dev-qa-db-fra.com

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

J'ai un <div contenteditable=true> Où je définis 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>, Les éléments <p> ...

Existe-t-il un autre moyen de définir le focus dans mon cas?

jqueryfocuscontenteditable
61
sanceray3

Ancien poste, mais aucune des solutions n'a fonctionné pour moi. Je l'ai finalement compris cependant:

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

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 des 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 avoir supprimé nbsp, le curseur reste à l'intérieur de l'élément p

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

34
Dima Vidmich

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

28
Vlad

Dans le cas où quelqu'un, qui utilise MediumEditor qui gère l'élément contenteditable, tombe sur ce problème, ce qui suit a fonctionné pour moi:

editor.selectElement(editorDOMNode);
  1. editor est une instance de MediumEditor.
  2. editorDOMNode est une référence au nœud DOM contenteditable réel.

  3. Il est également possible de se concentrer sur un nœud enfant spécifique dans l'éditeur comme suit:

    editor.selectElement(editorDOMNode.childNodes[0]);
4
Eye

Vous pouvez essayer ce code, il peut se concentrer 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)
2
Surmon

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

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

1
horsantula