[JS] Range probleem

[Kiphaas7]

Ik ben me aan het verdiepen in jquery, en javascript in het algemeen, en was nu aan het proberen om text binnen de bijbehorende <pre> tags te selecteren zodra op bijbehorende button wordt geklicked.

Dus voor de duidelijkheid: klick button 1 -> selecteer text alleen binnen pre tag die er direct na komt, klick button 2 -> selecteer alleen text binnen pre tag die er direct na komt...

De code:

HTML:

<button class="selectcode">Select Code</button>
<pre>blaat text nummer 1</pre>

<button class="selectcode">Select Code</button>
<pre>blaat text nummer 2</pre>

JavaScript:

$('.selectcode').click(function () {
    // Standard compliant browsers
    if(document.createRange) {
            rangeToSelect = document.createRange();
            rangeToSelect.selectNode(this.nextSibling.firstChild);
            curSelect = window.getSelection();
            curSelect.addRange(rangeToSelect);
            return false;
    }
    // ie
    if(document.body && document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(this.nextSibling);
            range.select();
            return false;
    }
    return false;
})

Raad eens, het werkt niet naar behoren . Alleen IE die zijn eigen methodes er op nahoudt doet precies wat ik wil.

Firefox doet het ook goed, maar zodra je een tweede button aanklikt wordt de range uitgebreid. In het bovenstaande voorbeeld zou dan de text binnen allebei de pre tags geselecteerd worden. Niet wenselijk.

Opera en safari maken ook kuren zodra een tweede button aangeklikt wordt. Zij doen helemaal niks meer dan.

Op een of andere manier moet ik de range clearen, maar ik zie even niet hoe. deleteRange is geen optie, aangezien deze letterlijk de hele text verwijderd.

Het probleem zit dus in:

JavaScript:

            rangeToSelect = document.createRange(); 
            rangeToSelect.selectNode(this.nextSibling.firstChild); 
            curSelect = window.getSelection(); 
            curSelect.addRange(rangeToSelect);

Of pak ik dit nou helemaal verkeerd aan?

[Bozozo]

sel.removeAllRanges() lijkt me wat jij zoekt. Een selectie kan meerdere ranges bevatten, hoewel nietmand dat in praktijk gebruikt.

[Kiphaas7]

Bozozo schreef op zaterdag 02 augustus 2008 @ 11:46:
sel.removeAllRanges() lijkt me wat jij zoekt. Een selectie kan meerdere ranges bevatten, hoewel nietmand dat in praktijk gebruikt.

D'oh . Googlen op het probleem vond ik lastig aangezien range nogal een veelgebruikte term is.

Uiteindelijke code (wat werkt op safari3, ff3 en opera9.51 en ie 6&7):

JavaScript:

$('.selectcode').click(function () {
    // Standard compliant browsers
    if(document.createRange) {
        rangeToSelect = document.createRange();
        if(typeof(curSelect) != 'undefined') {
            curSelect.removeAllRanges();
        }
        rangeToSelect.selectNode(this.nextSibling.firstChild);
        curSelect = window.getSelection();
        curSelect.addRange(rangeToSelect);
        return false;
    }
    // ie
    if(document.body && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this.nextSibling);
        range.select();
        return false;
    }
    return false;
})

[Bozozo]

Je kunt eigenlijk beter selectNodeContents() gebruiken. Het regeltje
rangeToSelect.selectNode(this.nextSibling.firstChild)
doet namelijk niet hetzelfde als
range.moveToElementText(this.nextSibling)
als this.nextSibling meerdere nodes bevat, wat altijd onverhoopt eens kan gebeuren.

[Kiphaas7]

Bozozo schreef op zondag 03 augustus 2008 @ 12:28:
Je kunt eigenlijk beter selectNodeContents() gebruiken. Het regeltje
rangeToSelect.selectNode(this.nextSibling.firstChild)
doet namelijk niet hetzelfde als
range.moveToElementText(this.nextSibling)
als this.nextSibling meerdere nodes bevat, wat altijd onverhoopt eens kan gebeuren.

Lijkt me niet, aangezien alles binnen de pre tag geconverteerd is naar htmlentities. Maar ik heb het toch veranderd omdat het me inderdaad netter lijkt.