Javascript Girl
  1. Javascript Girl
  3. La sélection déroutante n'est pas prise en charge par erreur dans google chrome and chrome
Intereting Posts
Joint.js Drag and Drop Element entre deux papiers Changer la classe CSS si la fenêtre est inférieure à () API de recherche personnalisée Google Javascript: recherchez des images par image url Format approprié d'une requête multipart / mixed batch de Google Drive API à l'aide de Javascript SomeFunction.Prototype.constructor vs someFunction.constructor Comment envoyer des données de JavaScript vers PHP et vice versa? HTML5 pour IE6.0 J'ai essayé de prototyper une méthode length () pour Object et a cassé jQuery – comment? Comment puis-je déterminer scrollHeight? DOMParser est indéfini dans IE9 Devrais-je encapsuler ma bibliothèque javascript? L'auditeur d'événement en javascript ne déclenche pas, sauf pour la date de chargement de la page Comment faire une fonction qui calcule le factoriel pour les nombres avec des décimales? Qu'est-ce que le "x = x || {} "En JavaScript – et comment cela affecte-t-il cette IIFE? Comment obtenir un mot sous le curseur en utilisant JavaScript?

La sélection déroutante n'est pas prise en charge par erreur dans google chrome and chrome

Je travaille sur une application de favoris où je dois stocker les mots-clés ou les mots ou le contenu sélectionné par l'utilisateur. J'utilise les méthodes createRange () et addRange () javascript pour créer la gamme, puis découvrez les éléments / contenus sélectionnés par l'utilisateur. Le code que j'ai écrit pour cela est le suivant. 

<head> <script type="text/javascript"> var storedSelections = []; function StoreSelection () { if (window.getSelection) { var currSelection = window.getSelection (); for (var i = 0; i < currSelection.rangeCount; i++) { storedSelections.push (currSelection.getRangeAt (i)); } currSelection.removeAllRanges (); } else { alert ("Your browser does not support this example!"); } } function ClearStoredSelections () { storedSelections.splice (0, storedSelections.length); } function ShowStoredSelections () { if (window.getSelection) { var currSelection = window.getSelection (); currSelection.removeAllRanges (); for (var i = 0; i < storedSelections.length; i++) { currSelection.addRange (storedSelections[i]); } } else { alert ("Your browser does not support this example!"); } } </script> </head> <body> Select some content on this page and use the buttons below.<br /> <br /> <button onclick="StoreSelection ();">Store the selection</button> <button onclick="ClearStoredSelections ();">Clear stored selections </button> <button onclick="ShowStoredSelections ();">Show stored selections</button> </body>

Ce code fonctionne parfaitement sur Firefox. Je peux sélectionner plusieurs choses un par un et pouvoir afficher le contenu sélectionné à nouveau, mais sur le chrome et le chrome, je reçois une Discontiguous selection is not supported. Erreur lorsque je stocke plus d'un élément dans la gamme et cliquez sur le bouton Afficher les sauvegardes stockées.

L'aide sera appréciée. Et s'il vous plaît me suggérer s'il existe d'autres alternatives pour accomplir cette tâche de bookmarking.

    Écrire 

     window.getSelection().removeAllRanges();

    Immédiatement avant la création de la gamme.

    https://bugs.chromium.org/p/chromium/issues/detail?id=399791

    Voici la seule façon possible de faire ceci que j'ai pu proposer:

    Enroulez la sélection dans <span style="background: Highlight;">...</span> .

    Mais notez:

    • De toute évidence, vous devez supprimer ces vitesses dès que toute autre chose est sélectionnée, mais cela ne devrait pas être trop difficile. Cependant, vous devez utiliser window.onmousedown pour cela plutôt que window.onclick , car onclick est déclenché après avoir appuyé sur un bouton, alors lorsque vous appuyez sur votre bouton "Afficher les sélections stockées", une nouvelle sélection sera créée, détruisant ainsi celui qui était Supposé être capturé.
    • L'enlèvement ou le remplacement de tous les éléments dans lesquels une sélection mémorisée démarre ou se termine invalide cette sélection, alors, en cliquant sur "Afficher les sélections stockées", rien ne s'affiche.
    • Si la sélection s'étend sur plusieurs éléments, elle doit se diviser en une seule sélection pour chaque élément, sinon l'insertion de la plage échouera ou coupe d'autres éléments (comme les boutons) en deux.

    Le code suivant ( violon ) est le meilleur que j'ai pu faire: 

     var storedSelections = []; var simulatedSelections = []; window.onmousedown = clearSimulatedSelections; function storeSelection() { if(window.getSelection) { var currSelection = window.getSelection(); for(var i = 0; i < currSelection.rangeCount; i++) { storeRecursive(currSelection.getRangeAt(i)); } currSelection.removeAllRanges(); } else { alert("Your browser does not support this example!"); } } function storeRecursive(selection, node, started) { node = node || document.body; started = started || false; var nodes = node.childNodes; for(var i = 0; i < nodes.length; i++) { if(nodes[i].nodeType == 3) { var first = nodes[i] == selection.startContainer; var last = nodes[i] == selection.endContainer; if(first) { started = true; } if(started) { var sel = selection.cloneRange(); if(!first) { sel.setStartBefore(nodes[i]); } if(!last) { sel.setEndAfter(nodes[i]); } storedSelections.push(sel); if(last) { return false; } } } else { started = storeRecursive(selection, nodes[i], started); } } return started; } function clearStoredSelections() { storedSelections = []; } function showStoredSelections() { if(window.getSelection) { var currSelection = window.getSelection(); currSelection.removeAllRanges(); for(var i = 0; i < storedSelections.length; i++) { var node = document.createElement("span"); node.className = "highlight"; storedSelections[i].surroundContents(node); simulatedSelections.push(node); } } else { alert("Your browser does not support this example!"); } } function clearSimulatedSelections() { for(var i = 0; i < simulatedSelections.length; i++) { var sec = simulatedSelections[i]; var pn = sec.parentNode; while(sec.firstChild) { pn.insertBefore(sec.firstChild, sec); } pn.removeChild(sec); } simulatedSelections = []; } 
     .highlight { background: Highlight; } 
     Select some content on this page and use the buttons below.<br><br> <button onclick="storeSelection();">Store the selection</button> <button onclick="clearStoredSelections();">Clear stored selections</button> <button onclick="showStoredSelections();">Show stored selections</button>

    FYI J'avais une erreur similaire lors du roulement de ma propre fonction "copie dans le presse-papier". Je ne vais pas aborder le code fourni par OP, mais je vais vous dire comment je l'ai corrigé dans mon propre code.

    Reproduire:

    1. Copiez un autre texte sur la page dans le presse-papiers, par exemple "foo".
    2. Collez le texte quelque part. Il produit "foo".
    3. Cliquez sur votre bouton "Copier dans le Presse-papiers", qui copie par exemple "barre".
    4. Collez le texte quelque part.

    Attendu:

    "Bar" est sorti.

    Réel:

    "La sélection inconditionnelle n'est pas prise en charge"

    Réparer:

    Appelez window.getSelection().removeAllRanges() au début de votre gestionnaire d'événements "copier dans le presse-papier". "Discontiguous" signifie "non connecté". Je suppose donc que le navigateur reproduit la première plage (le nœud contenant "foo"), puis se fâche lorsque vous essayez de sélectionner une autre plage qui n'est pas à côté du premier noeud.