Comment puis-je utiliser JavaScript pour sélectionner du texte dans un pré-noeud / bloc?

Autant que je sache, vous ne pouvez pas sélectionner de texte extérieur ou </ code>. BTW, pourquoi avez-vous besoin de cela? </ P> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">3 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> La raison est que le code source en surbrillance de la syntaxe affichée dans un bloc avant. Oui, l'utilisateur peut la mettre en surbrillance et les copier eux-mêmes, mais cela implique de déplacer la souris pour commencer et cliquer jusqu'à la fin, et peut entraîner une frustration si elles traînent trop loin ou non assez loin, etc. Ainsi, en fournissant un bouton qui fournit une touche qui fournit la sélection Pour eux, il leur est plus facile de copier un exemple de code. </p> <hr> <p class="answer-comment"> Vous pouvez sélectionner le texte en dehors de <code> <entrée> </ code> ou <code> <textarea> </ code>. Voir <code> window.getselection () </ code>: <a href="https://developer.mozilla.org/en/nsiselection" rel="nofollow noreferrer"> développeur.mozilla.org/fr/nsiselection < / a> </p> <hr> <p class="answer-comment"> Désolé de donner mauvaise réponse. Selon le lien de Tim, vous pouvez utiliser la méthode: <code> window.getselection (). SelectallChildren (document.getelementb yid ('elem_id')); </ code> pense que ça ne fonctionne que dans FF. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Regardez sur </ p> <p> <a href="htttps://developer.mozilla.org/it/dom/window.getselection" rel="nofollow"> https://developer.mozilla.org/it/dom/window.getselection < / a> </ p> <p> Il n'est pas compatible avec tous les navigateurs de maire, d'abord, c'est-à-dire que la mise en œuvre est la version 9 </ p> <p> Mais chez les plus âgés, il existe une API alternative dans le document.Selection, qui semble équivalent </ p> <p> <a href="http://msdn.microsoft.com/en-us/library/ms535869%28v=vs.85%29.aspx" rel="nofollow"> http://msdn.microsoft. COM / EN-US / Bibliothèque / MS535869% 28V = VS.85% 29.aspx </a> </ P> <p> bonne chance! </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Peut-être que vous pourriez changer la balise <code> pré </ code> dans une balise </ code> textarea </ code> lorsque l'utilisateur clique sur elle: <p> <strong> jsfiddle: <a href = "http: //jsfiddle.net/wzbqf/ "rel =" nofollow "> http://jsfiddle.net/wzbqf/ </a> </ fort> </ p> <pré> xxx </ pré> <p> et le JavaScript (jQuery) code: </ p> <pré> xxx </ pré> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> J'ai eu une solution pour travailler en fonction de cela, bien que mis en œuvre différemment. Je vais le poster une fois que je suis autorisé. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> OK - c'est ce que je fais en basé sur la suggestion de Jsfiddle et ça marche. Seul problème est que je n'ai pas de fenêtres et dans IE, c'est-à-dire que je dispose de la copie dans le presse-papiers, apparemment, les pauses de ligne sont cassées, mais ce n'est pas cette question (et je soupçonne un .replace () peut le corriger - j'ai juste besoin d'accéder à Windows à jouer avec IE): <pré> xxx </ pré> <p> La raison pour laquelle je n'utilise pas .Hide () où je cache le bloc avant est parce que .Hide () Ajoute un attribut de style interdit sous le Politique Mozilla CSP Le serveur utilise, je dois donc définir un attribut de classe. </ P> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Il convient de noter que mon code s'appuie sur le pré-nœud ayant le code de données d'attribut et (démarrage de Pre JS de toute façon) étant le seul enfant d'un noeud parent div. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 6<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Ce n'est pas trop difficile. Vous avez besoin de branches séparées pour IE <9 et tous les autres navigateurs. Voici une fonction pour sélectionner le contenu d'un élément: <P> Démo en direct: <a href="http://jsfiddle.net/yqa2w/" rel="norefiddle.net/yqa2w/ < / a> </ p> <p> code: </ p> <pré> xxx </ pré> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Belle solution. Je n'avais aucune idée de cette option et préférez-la à la conversion en zone de texte, d'autant plus que j'ai une liaison de données sur ma balise <pré> avec angularjs. Bon travail! </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 12<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> C'est ce dont vous avez besoin: <pré> xxx </ pré> <p> et le HTML: </ p> <pré> xxx </ pré> <p> ou si vous voulez faire ceci programmatiquement: </ p> <pré> xxx </ pré> <p> ou en jQuery: </ p> <pré> xxx </ pré> <p> Vous ne pouvez pas passer le clip d'élément jQuery () comme argument el. Il donnera "TypeError: argument 1 de plage.SelectNodeconTons ne met pas en œuvre le nœud d'interface." </ P> </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/impossible-d-39-importer-le-module-quot-angular-material-quot" class=""> Impossible d'importer le module "@ angular / material" </a> <hr> <a href="/question/interaction-profonde-avec-break-and-catch" class=""> Interaction profonde avec break and catch </a> <hr> <a href="/question/utilisation-de-node-js-comment-renommer-tous-les-fichiers-d-39-un-dossier" class=""> Utilisation de node.js comment renommer tous les fichiers d'un dossier </a> <hr> <a href="/question/google-chrome-uncaught-promis-domexception-lors-de-la-lecture-audio" class=""> Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>