J'essaie de créer un bookmarkklet JavaScript qui agira comme une surligneur, en modifiant le fond du texte sélectionné sur une page Web au jaune lorsque le signet est enfoncé.
J'utilise le code suivant pour obtenir la sélection texte, et cela fonctionne bien, renvoyant la chaîne correcte } Cependant, lorsque j'ai créé une fonction similaire pour modifier le CSS du texte sélectionné. Utilisation de jQuery, il ne fonctionne pas: } econtes?
6 Réponses :
Dans Firefox, vous pouvez utiliser le :: - Moz-Selection pseudo-classe.
Merci, mais je veux changer de façon permanente le CSS, il reste donc en surbrillance même lorsque je le désélectionne. Doit également travailler sur le navigateur croisé
Pour faire de la clé en surbrillance de manière permanente, je pense que vous allez devoir envelopper la sélection dans un nouvel élément DOM ( span devrait faire), à laquelle vous pouvez ensuite attacher des propriétés de style. Je ne sais pas si JQuery peut le faire pour vous. Gardez à l'esprit que les sélections peuvent couvrir les limites des éléments, donc dans le cas général, vous allez devoir injecter un tas de nouveaux éléments
Voici un exemple brut de la façon dont cela pourrait fonctionner. Comme Zack souligne que vous devrez être conscient des cas où la sélection s'étend sur plusieurs éléments. Cela n'est pas destiné à être utilisé comme - est, juste quelque chose pour aider à faire circuler des idées. Testé en chrome.
Ça a l'air bien merci. Dans cet exemple, qu'est-ce que l'élément parent serait habituellement? Et si l'élément parent contenait plusieurs instances de la chaîne?
Dans mon cas, l'élément parent était la balise contenant
. Vous faites un bon point sur les instances répétées de la chaîne, surtout si elles soulignent un mot commun. Je ne suis pas sûr de savoir comment se déplacer ce n'est pas encore mais je posterai si je pense à quoi que ce soit.
regarder un petit exemple que j'ai fait à http://www.jsfiddle.net/ HBWee / 3 /
Il ne prend pas en compte les sélections qui parcourent plusieurs éléments. ( ie va faire mais va désordre le HTML un peu .. )
Le moyen le plus simple de le faire est d'utiliser Ce qui suit devrait faire ce que vous voulez sur n'importe quelle sélection , y compris ceux qui couvrent plusieurs éléments. Dans les navigateurs non-IS, il allume Mise à jour forte> p> fixe dans IE 9. P> exécuteur () code>, qui a une commande de modifier la couleur d'arrière-plan dans tous les navigateurs modernes. designmode code>, applique une couleur d'arrière-plan, puis bascule designmode code> à nouveau. P> function makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
function highlight(colour) {
var range, sel;
if (window.getSelection) {
// IE9 and non-IE
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
J'aime la réponse de Tim, c'est propre et rapide. Mais il arrête également les portes pour faire des interactions avec les points forts.
L'insertion des éléments en ligne directement autour des textes est un mauvais choix, car ils ont cassé le flux de texte et gâchent les choses dans des situations complexes,
Alors je suggère un Dirty Hack que
Ce Extension chromée est une exemple de la façon dont cela peut être fait.
Il utilise API de Cette bibliothèque pour obtenir la disposition absolue de chaque ligne sélectionnée. < / p>
Dupliqué possible: Stackoverflow.com/Questtions/2584301/... < / a>, Stackoverflow.com/Questtions/1622629/...