Sélectionnez par programme le texte dans un élément HTML contenteditable?

Question

En JavaScript, il est possible par programmation sélectionner du texte dans une input ou textarea élément. Vous pouvez vous concentrer une entrée avec ipt.focus(), puis sélectionnez le contenu, ipt.select(). Vous pouvez même sélectionner une plage spécifique avec ipt.setSelectionRange(from,to).

Ma question est: est-il un moyen de le faire dans un contenteditable de l'élément de trop?

J'ai trouvé ce que je peux faire elem.focus(), pour mettre le curseur en contenteditable élément, mais par la suite l'exécution elem.select() ne fonctionne pas (ni n' setSelectionRange). Je ne trouve rien sur le web à ce sujet, mais peut-être que je suis à la recherche de quelque chose de mal...

Par ailleurs, si cela fait une différence, je n'ai besoin de travailler dans Google Chrome, que ce soit pour une extension Chrome.

Answer 1

Si vous souhaitez sélectionner tout le contenu d'un élément (contenteditable ou pas) dans Chrome, voici comment. Cela permettra également de travailler dans Firefox, Safari 3+, Opera 9+ (éventuellement des versions antérieures trop) et IE 9. Vous pouvez également créer des sélections jusqu'au niveau du caractère. L'Api vous avez besoin sont des DOM Gamme (spec actuelle est DOM Niveau 2, voir aussi MDN) et de la Sélection, qui est spécifié en tant que partie d'une nouvelle Gamme de spec (MDN docs).

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

Answer 2

En plus de Tim Bas de répondre, je voudrais sauver que vous pourriez faire de cette façon:

var selectText = function() {
  var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

document.getElementById("foo").ondblclick = selectText;​

Testé sous IE 8+, Firefox 3+, Opera 9+, & Chrome 2+. Même moi, je l'ai mis dans un plugin jQuery:

jQuery.fn.selectText = function() {
  var range, selection;
  return this.each(function() {
    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(this);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
};

$('#foo').dblclick(function() {
    $(this).selectText();
});

...et qui intereseted, voici la même chose pour tout le café-junkies:

jQuery.fn.selectText = ->
  if document.body.createTextRange
    range = document.body.createTextRange()
    range.moveToElementText @[0]
    range.select()
  else if window.getSelection
    selection = window.getSelection()
    range = document.createRange()
    range.selectNodeContents @[0]
    selection.removeAllRanges()
    selection.addRange range

Mise à jour:

Si vous avez besoin de mettre en évidence l'ensemble de la page ou du texte dans les éléments marqués d' contenteditable, de sorte que vous pouvez faire beaucoup plus simple:

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands

var selectText = function () {
    document.execCommand('selectAll', false, null);
};

(fonctionne bien dans IE6+, Opera 9+, Firefoy 3+, Chrome 2+)

Answer 3

Longiligne permet de faire de la cross-browser avec le même code. Longiligne est un cross-browser mise en œuvre des méthodes du DOM pour les sélections. Il est bien testé et en fait un beaucoup moins douloureux. Je refuse d'y toucher contenteditable sans elle.

Vous pouvez trouver longiligne ici:

http://code.google.com/p/rangy/

Avec longiligne dans votre projet, vous pouvez toujours l'écrire, même si le navigateur est IE 8 ou une version antérieure et une API native pour les sélections:

var range = rangy.createRange();
range.selectNodeContents(contentEditableNode);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Où "contentEditableNode" est le nœud DOM qui a l'attribut contenteditable. Vous pouvez extraire de cette façon:

var contentEditable = document.getElementById('my-editable-thing');

Ou si jQuery est une partie de votre projet et vous trouvez qu'il est commode:

var contentEditable = $('.some-selector')[0];

Answer 4

[Mis à jour pour corriger l'erreur]

Voici un exemple adapté de cette réponse qui semble bien fonctionner dans Chrome - Sélectionnez une plage dans contenteditable div

 var elm = document.getElementById("myText"),
    fc = elm.firstChild,
    ec = elm.lastChild,
    range = document.createRange(),
    sel;
elm.focus();
range.setStart(fc,1);
range.setEnd(ec,3);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
 

HTML est:

 <div id="myText" contenteditable>test</div>
 

Answer 5

contenteditable n'est qu'un attribut, interprété par le navigateur. Vous pouvez modifier de tels éléments avec des fonctions DOM ordinaires.

Voir javascript TextRanges .

Btw, recherche rapide dans SO, m'a donné quelques résultats .