surligner tout le texte dans le textarea

Question

Je veux sélectionner tout le texte à l'intérieur d'une zone de texte lorsqu'un utilisateur clique sur la zone de texte. J'ai essayé onclick="this.focus()" mais cela n'a rien donné. J'ai essayé onclick="this.highlight()" mais cela a provoqué une erreur. Que dois-je faire ?

Answer 1

Cela peut gêner vos utilisateurs car cela empêche le comportement par défaut utile de placer le curseur à l'endroit où l'utilisateur a cliqué et je recommande donc de ne pas le faire en général. Cela dit, la solution pour la plupart des navigateurs est la suivante onclick="this.select()" .

Cependant, cela ne fonctionnera pas dans Chrome [MISE À JOUR février 2014 : il semble maintenant fonctionner dans les versions récentes de Chrome]. . Pour une solution de contournement et des informations générales sur ce problème, voir la question suivante : jQuery - sélectionner tout le texte d'une zone de texte

Answer 2

onclick="this.focus();this.select()" readonly="readonly"

Answer 3

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </textarea>

J'ai obtenu ce code aquí

Answer 4

onclick="this.focus()" est redondant, car le focus() est identique à un clic dans la zone de texte (mais elle place le curseur à la fin du texte).

highlight() n'est même pas une fonction, à moins bien sûr que vous ne l'ayez créée ailleurs.

Conclusion : faire this.select()

Answer 5

Il semble que de plus en plus de navigateurs supportent setSelectionRange() que select()

1 voie : - Utiliser setSelectionRange()

https://caniuse.com/#search=setSelectionRange

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () {

        if(my_textarea.value !== ""){

            my_textarea.onfocus = function () {
                my_textarea.setSelectionRange(0, my_textarea.value.length);
                my_textarea.onfocus = undefined;
            } 
            my_textarea.focus();        

        }   

    }

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>

2 voies : - Utilisation select()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select#browser_compatibility

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () {

        if(my_textarea.value !== ""){

            my_textarea.onfocus = function () {
                my_textarea.select();
                my_textarea.onfocus = undefined;
            } 
            my_textarea.focus();        

        }   

    }

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>