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

Pour compléter d'autres réponses, vous voudrez peut-être copier le code/texte sur lequel vous venez de cliquer :

onclick="this.focus();this.select();document.execCommand('copy')"

Answer 2

Vous devez utiliser les fonctions Javascript .focus() et .select() pour obtenir le résultat souhaité.

Consultez le lien ci-dessous pour un exemple :

http://www.plus2net.com/javascript_tutorial/textarea-onclick.php

Answer 3

const elem = document.elementFromPoint(clientX, clientY)
if (elem.select) { // Make sure the method exists.
  elem.focus()
  elem.select()
}

Il se peut que vous ne souhaitiez pas passer du temps à trouver votre objet.

Par exemple, vous avez écrit des extensions à injecter des scripts dans la page web.

Pour l'instant, vous n'avez pas besoin de considérer l'élément ID que vous pouvez appliquer immédiatement.

Exemple

<textarea rows="3" style="width:200px">"Double click" or Press "F4" to select all text</textarea>
<script>

  let clientX, clientY
  document.addEventListener("mousemove", (e) => {
    clientX = e.clientX
    clientY = e.clientY
  })

  selectAllFunc = () => {
    const elem = document.elementFromPoint(clientX, clientY)
    if (elem.select) { // Make sure the method exists.
      elem.focus()
      elem.select()
    }
  }

  document.addEventListener("keydown", (keyboardEvent) => {
    if (keyboardEvent.key === "F4") { // && keyboardEvent.ctrlKey
      selectAllFunc()
    }
  })

  document.addEventListener("dblclick", (e) => {
      selectAllFunc()
  })
</script>