web-dev-qa-db-fra.com

Comment sélectionner tout le texte dans une div contentable?

Avant que cela ne soit signalé comme doublon, je veux que vous vous rendiez compte que personne n'a réellement fourni une bonne réponse à cette question spécifique. Dans sélectionnez tout le texte dans la div contentable quand il se concentre/cliquez , la réponse acceptée et la réponse de Tim Down ne sont pas utiles, car elles ne fonctionnent que lorsque l'élément est déjà focalisé. Dans mon cas, je veux que tout le texte dans la div contentable soit sélectionné après le clic d'un bouton, même si la div n'a pas été focalisée au préalable.

Comment pourrais-je faire ça?

javascriptjqueryhtmlcontenteditable
34
Lucas - Better Coding Academy

J'ai utilisé du code de ce fil pour trouver ma réponse. C'est 100% jQuery comme vous l'avez demandé également. J'espère que vous aimez :)

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$("button").click(function() {
    $("#editable").selectText();
});​

jsfiddle lien.

52
Tom Oakley

Par exemple, dans le scénario suivant, si l'utilisateur définit le focus sur div modifiable (avec la souris, le clavier ou en cliquant sur un bouton), le contenu du div modifiable est sélectionné.

<div id="editable" style=" border:solid 1px #D31444" contenteditable="true" 
    onfocus="document.execCommand('selectAll', false, null);">
  12 some text...
</div>
    
<button onclick="document.getElementById('editable').focus();" >Click me</button>

Sur JSFiddle: http://jsfiddle.net/QKUZz/

12
Andrew D.

Grande fonction.

Je l'ai adapté pour permettre une sélection complète de texte sur un nombre illimité de divs modifiables via une classe, qu'il soit cliqué directement ou tabulé pour:

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    //console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".editable").on("focus", function () {
    $(this).selectText();
});
$(".editable").on("click", function () {
    $(this).selectText();
});
$('.editable').mouseup(function(e){
    e.stopPropagation();
    e.preventDefault();
    // maximize browser compatability
    e.returnValue = false;
    e.cancelBubble = true;
    return false; 
});

HTML:

<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div>

VIOLON:

http://jsfiddle.net/tw9jwjbv/

3
Eric P
<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>

À en juger par cette réponse fournie dans le lien, vous ne pouvez pas utiliser le code en cliquant sur votre bouton.

Ce que je dis, c'est même dire dans la div onfocus="document.execCommand('selectAll',false,null)"

Utilisez ensuite jQuery pour déclencher le focus $('#test').focus();

2
LmC

Chrome sélectionne tout, j'ai donc ajouté RAF pour contourner le problème:

requestAnimationFrame(() => document.execCommand('selectAll'));

Version non autorisée: http://jsfiddle.net/QKUZz/

Version corrigée: http://jsfiddle.net/0aqptw8m/

1
redaxmedia