2009-05-28 9 views
3

en utilisant Javascript, il est facile de sélectionner par programme le texte à l'intérieur d'une zone de texte ou d'un élément de texte de saisie. Que diriez-vous pourpuis-je mettre en surbrillance n'importe quel texte en utilisant Javascript autre que textarea et l'élément de texte de saisie?

<span>The quick brown fox jumps over the lazy dog</span> 

est-il possible d'utiliser JavaScript pour sélectionner les mots "quick brown fox"? Ou sélectionnez la phrase entière?

Répondre

5

Avec l'aimable autorisation de http://www.sitepoint.com/forums/showthread.php?t=459934

<script type="text/javascript"> 
    function fnSelect(objId) { 
     fnDeSelect(); 
     if (document.selection) { 
     var range = document.body.createTextRange(); 
      range.moveToElementText(document.getElementById(objId)); 
     range.select(); 
     } 
     else if (window.getSelection) { 
     var range = document.createRange(); 
     range.selectNode(document.getElementById(objId)); 
     window.getSelection().addRange(range); 
     } 
    } 

    function fnDeSelect() { 
     if (document.selection) document.selection.empty(); 
     else if (window.getSelection) 
       window.getSelection().removeAllRanges(); 
    } 
    </script> 
<body> 

<div id="test1"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<div id="test2"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<a href="javascript:fnSelect('test1');">Select 1</a> 
<a href="javascript:fnSelect('test2');">Select 2</a> 
<a href="javascript:fnDeSelect();">DeSelect</a> 
</body> 
+0

A dû l'essayer. Travaillé parfaitement. +1 – Stefan

0

css vous pouvez créer une classe HIGHLIGHT

.highlight{ 
    background-color:yellow; 
} 

en javascript, vous pouvez ajouter la classe HIGHLIGHT aux éléments que vous souhaitez mettre en évidence

<getSpanElement>.className='highlight'; 

ce texte est ensuite mis en évidence, bien que il n'est pas sélectionné.

0

Mettez en surbrillance ou sélectionnez? Je pense que vous voulez vraiment choisir de ne pas mettre en évidence.

Mettez en surbrillance ... oui! Définissez les propriétés CSS appropriées de l'élément span, par exemple la couleur de premier plan et d'arrière-plan.

Éditer: C'est ce qu'on appelle la sélection. Désolé, je ne connais aucun moyen de le faire.

+0

coz quand je dis "en sélectionnant", certains utilisateurs pensaient que cela signifiait "obtenir la valeur de". –

1

Vous aurez besoin d'un moyen de manipuler la balise span. Tels qu'un id, mais alors en javascript je voudrais modifier certaines des propriétés style. Vous pourriez avoir une propriété pour tout ce que vous voulez mettre en évidence comme ce qui est montré ci-dessous.

.HL { 
    background: #ffff99; 
    color: #000000; 
} 

Si vous faites cela, vous aurez besoin d'obtenir une référence à l'étiquette spécifique.

DocumentgetElementsByTagName("title") 

Sinon, Document.getElementByID("ID") est bon pour les ID uniques. Puis en utilisant setAttribute(name, value) Pour changer la classe à celle donnée.

Ceci est juste un exemple simple, mais il y a plusieurs façons de le faire.

<span id="abc" class=""> Sample </span> 
var temp = Document.getelementByID("abc"); 
temp.setAttribute('class', 'HL'); 
Questions connexes