Je dois sélectionner tous les nœuds d'un document HTML à l'aide de l'API de sélection DOM Si je sélectionne du texte manuellement (via la souris), ces éléments ne seront pas sélectionnés. Si j'applique J'ai essayé différentes méthodes du Obselection code>.
Les nœuds qui ne sont pas sélectionnés par l'utilisateur (c'est-à-dire avec la souris) doivent être exclus.
Donc, si un élément a la règle CSS User-Select-Select: Aucune CODE> ou -MOZ-User-SELECT: Aucun CODE> Appliqué à celui-ci, ma sélection programmatique doit exclure ces éléments. window.getselection (). SelectAllChildren code> sur l'un de ses éléments parent, l'élément non sélectionnable est également sélectionné. P> Sélection CODE> et les objets CODE> Gamme CODE>, mais n'ont pas trouvé de moyen de sélectionner uniquement les éléments programmatiques de manière programmatique manuellement. P> function isSelectable(node) {
// determine if node is selectable
}
3 Réponses :
Eh bien, comme je soupçonnais que votre code est partiellement bon (99% bien) et c'est à cause de différents navigateurs, combinant votre script et votre lien que je vous ai déjà envoyé, je gère ceci:
p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
</style>
</head>
<body>
<div>Selectable</div>
<div class="noselect">
<span id="span">Non-Selectable</span>
</div>
<div id="r">
</div>
<script>
window.onload = function() {
var sel = window.getSelection();
sel.selectAllChildren(document.body);
document.getElementById('r').innerHTML = sel.containsNode(document.getElementById('span'));
// outputs true
};
</script>
</body>
</html>
J'apprécie vraiment votre aide! :) Malheureusement, je ne vois toujours pas comment cela vous aide à déterminer si un nœud est sélectionnable. Dans votre exemple, je peux dire s'il est sélectionnable en raison de la classe nosélect - mais la plupart des pages Web ne le feront pas si facile pour moi
Donc, ce dont j'ai besoin est une fonction comme ceci: isselectable (nœud) {... retour SIMITABLE}
Oui, et parce que c'est un navigateur spécifique, je pense que nous devrions commencer à construire cette fonction pour chaque navigateur séparément. Comme sur Chrome Noselect et votre JavaScript fonctionne parfaitement, mais sur Firefox, bord et c'est-à-dire que cela ne le fait pas. (J'utilise Noselect car il fonctionne sur tous les navigateurs pour la sélection des utilisateurs)
Peut-être quelque chose comme ceci: Fondamentalement, si cet élément ou l'un de ses ancêtres ne sont pas sélectionnés, cet élément est non sélectionné. Nous vérifions cet élément, puis utilisons la récursion pour vérifier les éléments ancêtres, ce qui nous arrête de sortir des ancêtres ou lorsque nous en trouvons un qui est défini non sélectionné. mon hypothèse sur la sélection de l'utilisateur Les œuvres pourraient être fausses; Il pourrait être possible de forcer un élément interne à sélectionner même après avoir défini un ancêtre non sélectionné. La logique pourrait être réorganisée pour être moins déroutante. Il est certainement possible de supprimer la récursion, en utilisant une boucle à la place. Le tableau userselectLect pourrait utiliser une certaine intelligence; Si tel est pour une extension, vous pouvez utiliser cela pour informer quels attributs que vous devez rechercher. Ce code attend un élément plutôt qu'un nœud. Je n'ai pas vraiment testé ce code mais il semble que cela fonctionne.
Merci pour votre réponse :) Oui, c'est pour une extension. Je sais que je peux savoir si un élément est sélectionnable en itérant sur tous ses ancêtres vérifiant pour getcomputedstyle (noeud) .mozuserselect , mais malheureusement, cela est un moyen de faire du mal à temps, car je ferais cela Pour chaque nœud dans corps . J'espérais qu'il y a un chèque facile sans avoir à faire boucle à travers tous les ancêtres;)
@ user1521685 Il n'y a pas. Peut-être que si vous avez fourni un cas d'utilisation, une alternative pourrait être suggérée.
Voici une solution possible sans avoir à boucle à travers les ancêtres du nœud: explication:
Si un nœud n'est pas sélectionné par l'utilisateur, vous pouvez toujours le sélectionner programmatiquement ( selectallChallildren ), mais tostring () n'inclut pas le contenu du texte du nœud de toute façon.
Dans mon cas, j'ai besoin de itérer sur tous les nœuds de texte de document.body et malheureusement, cette solution est toujours
Avez-vous essayé de boucler à travers tous les éléments et sélectionnez uniquement ceux basés sur les conditions requises?
@Dejandozet: Je devrais vérifier avec
window.getcomputertedstyle (noeud) .gepropertyvalue ('- Moz-user-Se lect') - mais aussi pour tous les parents du nœud. Inquéralement qu'il y ait aussiutilisateur-select-select ,-ms-utilisateur-sélectionnez , .... Aussi cela serait trop prudent à mon objectif@Dejandozet: edit: Mon code est itération via tous les nœuds de texte utilisant déjà un
Nodeiterator . S'il y avait un moyen facile de vérifier si un nœud est sélectionnable manuellement, cela ferait le tour. Mais je ne saurais pas commentS'il est possible de décider rapidement si un nœud donné est sélectionné par l'utilisateur, cela résoudrait mon problème. Peut-être qu'il est préférable d'ouvrir une nouvelle question pour cela
Pouvez-vous ajouter une classe de nosélect à chaque élément no-sélect, puis obtenir le résultat souhaité, vous pouvez regarder cet article: Stackoverflow.com/ A / 9314458/4541566 pour cela et peut-être d'autres messages sur cette page
Je ne sais pas comment cela aiderait. Si je fais chaque élément non sélectionnable, je sais déjà qu'ils sont non sélectionnés. Mais je veux savoir si un élément est sélectionnable
D'accord, mais ce style sur DIV (-MOZ-User-Select: Aucune) D'où cela vient?
Mon code devrait travailler sur n'importe quelle page Web arbitraire (c'est une extension de navigateur). C'est pourquoi je dois déterminer par programme quels éléments ne sont pas sélectionnables