En JavaScript, il est possible de sélectionner par programme du texte dans un élément input
ou textarea
. Vous pouvez focaliser une entrée avec ipt.focus()
, puis sélectionner son contenu avec ipt.select()
. Vous pouvez même sélectionner une plage spécifique avec ipt.setSelectionRange(from,to)
.
Ma question est la suivante: y a-t-il un moyen de le faire également dans un contenteditable
élément?
J'ai trouvé que je peux faire elem.focus()
, mettre le curseur dans un contenteditable
élément, mais par la suite, l'exécution elem.select()
ne fonctionne pas (et ne fonctionne pas non plus setSelectionRange
). Je ne trouve rien sur le Web à ce sujet, mais peut-être que je cherche la mauvaise chose ...
Au fait, si cela fait une différence, je n'en ai besoin que pour fonctionner dans Google Chrome, car c'est pour une extension Chrome.
selectElementContents()
unsetTimeout()
ourequestAnimationFrame()
s'il est appelé depuis unonfocus
. Voir jsfiddle.net/rudiedirkx/MgASG/1/showfocus()
.En plus de la réponse de Tim Downs , j'ai créé une solution qui fonctionne même dans oldIE:
Testé dans IE 8+, Firefox 3+, Opera 9+ et Chrome 2+. Même je l'ai configuré dans un plugin jQuery:
... et qui est intéressé, voici la même chose pour tous les accros du café:
Mettre à jour:
Si vous souhaitez sélectionner la page entière ou le contenu d'une région modifiable (signalée par
contentEditable
), vous pouvez le faire beaucoup plus simplement en basculant versdesignMode
et en utilisantdocument.execCommand
:Il y a un bon point de départ chez MDN et un peu de documentation .
(fonctionne bien dans IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand
la source
Étant donné que toutes les réponses existantes portent sur des
div
éléments, je vais vous expliquer comment procéder avec l'span
art.Il existe une différence subtile lors de la sélection d'une plage de texte dans un fichier
span
. Pour pouvoir transmettre l'index de début et de fin du texte, vous devez utiliser unText
nœud, comme décrit ici :la source
r.setStart(e.firstChild,0); r.setEnd(e.lastChild,e.lastChild.textContent.length);
bien sûr, vous devriez vérifier que e.firstChild n'est pas nul.<div>
et un<span>
élément. Du moins, pas comme tu le décris.Rangy vous permet de faire ce cross-browser avec le même code. Rangy est une implémentation multi-navigateur des méthodes DOM pour les sélections. Il est bien testé et rend cela beaucoup moins douloureux. Je refuse de toucher contenteditable sans lui.
Vous pouvez trouver rangy ici:
http://code.google.com/p/rangy/
Avec rangy dans votre projet, vous pouvez toujours écrire ceci, même si le navigateur est IE 8 ou antérieur et a une API native complètement différente pour les sélections:
Où "contentEditableNode" est le nœud DOM qui a l'attribut contenteditable. Vous pourriez le récupérer comme ceci:
Ou si jQuery fait déjà partie de votre projet et que vous le trouvez pratique:
la source
La façon moderne de faire les choses est comme ça. Plus de détails sur MDN
la source
[Mis à jour pour corriger l'erreur]
Voici un exemple adapté de cette réponse qui semble bien fonctionner dans Chrome - Sélectionnez la plage dans contenteditable div
HTML est:
la source