[js] focus op textarea in ie?

[wilcodl]

Hallo,
ik ben voor mijn gastenboek een bbcode systeem aan het bouwen, zie deze link.
Het probleem zit em in het systeem om een link toe te voegen. Als je daar op klikt krijg je een div schermpje ervoor, waar je de url en websitenaam in kan vullen. Als ik in Firefox een tekst selecteer en dan op het link knopje druk is in het schermpje de linknaam al ingevuld. Als ik dan de url invul en op submit druk word de tekst netjes in een bbcode veranderd. Echter, in Internet Explorer werkt dit niet, omdat ie de focus niet op de textbox kan krijgen. Het werkt ook niet goed als ik in regel 54 sub.disabled=type; vervang door sub.readOnly=type;
Als ik dat doe dan werkt het script ook niet meer goed in firefox en opera.

Dit is de javascipt code:

JavaScript:

function bburl(){
    if (document.getElementById("popbox").style.visibility == "" || document.getElementById("popbox").style.visibility == "hidden")
    {
        document.getElementById("popbox").style.visibility = "visible";

        sub = document.form.bericht;
        open(true);

        if (navigator.appName=="Microsoft Internet Explorer")
        {
            sub.focus();
            document.bbpop.urlname.value = document.selection.createRange().text;
        } else {
            deb = sub.selectionStart;
            fin = sub.selectionEnd;

            document.bbpop.urlname.value = sub.value.substring(deb,fin);
        }
    } else {
        document.getElementById("popbox").style.visibility = "hidden";
        open(false);
        sub.focus();
    }
}

function bburldo(){
    sub = document.form.bericht;
    waarde = '[url='+document.bbpop.url.value+']'+document.bbpop.urlname.value+'[/url]';

    open(false);

    if (navigator.appName=="Microsoft Internet Explorer")
    {
        sub.focus();
        document.selection.createRange().text = waarde;
    } else {
        deb = sub.selectionStart;
        fin = sub.selectionEnd;
        voorsel = sub.value.substring(0,deb);
        nasel = sub.value.substring(fin,sub.value.length);

        sub.value = voorsel + waarde + nasel;
    }
    document.bbpop.url.value = 'http://';
    document.bbpop.urlname.value = '';
    document.getElementById("popbox").style.visibility = "hidden";
    sub.focus();
}

function open(type){
    sub = document.form.bericht;
    sub1 = document.form;

    sub.disabled=type;

    sub1.bold.disabled = type;
    sub1.italic.disabled = type;
    sub1.underline.disabled = type;
    sub1.submit.disabled = type;
    sub1.reset.disabled = type;
}

En de verkorte html code:

HTML:

<div id="popbox">
<form action="" method="post" name="bbpop">
<span class="boxtext">Hyperlink:</span><input type="text" name="url" value="http://" /><br />
<span class="boxtext">Title:</span><input style="margin-top: 3px;" type="text" name="urlname" value="" /><br /><br />
<input onclick="bburldo();" type="button" name="add" value="Submit" />
<input onclick="bburl();" type="button" name="close" value="Close" />
</form>
</div><form id="toevoegen" action="" method="post" name="form">
<div class="row"><input class="right" type="text" name="naam" value="" /><b>Name:</b></div>
<div class="row"><input class="right" type="text" name="email" value="" />E-mail:</div>
<div class="row"><input class="right" type="text" name="website" value="http://" />Website:</div>
<div class="row"><input class="right" type="text" name="woonplaats" value="" />City:</div>
<center><textarea cols="52" rows="8" name="bericht"></textarea></center>
<div class="row3"><span class="right"><input type="submit" name="submit" value="Submit" />
<input onclick="empty();" type="button" value="Reset" name="reset" /></span><button onclick="bb('b');" class="bbcode" type="button" name="bold" title="Bold"><img src="images/pics/bold.gif"
alt="Bold" /></button><button onclick="bb('i');" class="bbcode" type="button" name="italic" title="Italic"><img src="images/pics/italic.gif"
alt="Italic" /></button><button onclick="bb('u');" class="bbcode" type="button" name="underline" title="Underlined"><img src="images/pics/underline.gif"
alt="Underlined" /></button><button onclick="bburl();" class="bbcode" type="button" name="hyperlink" title="Hyperlink"><img src="images/pics/url.gif"
alt="Hyperlink" /></button></div></form>

[André]

Ik zou de open function een andere naam geven, op deze manier conflicteert hij met window.open

En als ik het goed begrijp is de textbox disabled en kan IE daardoor geen tekst er in plaatsen? Kun je hem voor regel 35 niet even heel kort enablen om hem na het plaatsen van de tekst weer te disablen?

Ook zou je de waarde van de geselecteerde tekst in een variabele kunnen plaatsen die je vervolgens met getElementById weer in de textbox plaatst.

[wilcodl]

Bedankt voor de reactie, André. Ik heb de functie openpop verplaatst van regel 7 naar regel 18 en de geselecteerde tekst wordt nu in het schermpje weergegeven. Echter, omdat ik bij het invullen van de url een ander veld selecteer, wordt de bbcode aan het begin van de tekst in het textarea geplaatst ipv op de plek van de geselecteerde tekst.
Misschien moet ik de de waarde van het textarea veld in een variabele of meerde variabelen zetten?

JavaScript:

function bburl(){
    if (document.getElementById("popbox").style.visibility == "" || document.getElementById("popbox").style.visibility == "hidden")
    {
        document.getElementById("popbox").style.visibility = "visible";

        sub = document.form.bericht;

        if (navigator.appName=="Microsoft Internet Explorer")
        {
            sub.focus();
            document.bbpop.urlname.value = document.selection.createRange().text;
        } else {
            deb = sub.selectionStart;
            fin = sub.selectionEnd;

            document.bbpop.urlname.value = sub.value.substring(deb,fin);
        }
        openpop(true);
    } else {
        document.getElementById("popbox").style.visibility = "hidden";
        openpop(false);
        sub.focus();
    }
}

function bburldo(){
    sub = document.form.bericht;
    waarde = '[url='+document.bbpop.url.value+']'+document.bbpop.urlname.value+'[/url]';

    openpop(false);

    if (navigator.appName=="Microsoft Internet Explorer")
    {
        sub.focus();
        document.selection.createRange().text = waarde;
    } else {
        deb = sub.selectionStart;
        fin = sub.selectionEnd;
        voorsel = sub.value.substring(0,deb);
        nasel = sub.value.substring(fin,sub.value.length);

        sub.value = voorsel + waarde + nasel;
    }
    document.bbpop.url.value = 'http://';
    document.bbpop.urlname.value = '';
    document.getElementById("popbox").style.visibility = "hidden";
    sub.focus();
}

function openpop(type){
    sub = document.form.bericht;
    sub1 = document.form;

    sub.disabled=type;

    sub1.bold.disabled = type;
    sub1.italic.disabled = type;
    sub1.underline.disabled = type;
    sub1.submit.disabled = type;
    sub1.reset.disabled = type;
}

[ Voor 0% gewijzigd door wilcodl op 01-01-2007 22:10 . Reden: regelnummer veranderd ]

[wilcodl]

Na nog wat geprobeer ben ik weer wat verder. Op deze site vond ik een oplossing om de begin en eind positie van de geselecteerde tekst te vinden. Echter, als er geen tekst is geselecteerd en de cursor staat ergens tussen de tekst (waar je de bbcode wil invoeren) lukt het met deze code niet om de positie van de cursor op te sporen.
Ik heb al op verschillende sites gekeken en oplossingen geprobeerd, maar het is nog niet gelukt.

JavaScript:

function bburl(){
    var sub = document.form.bericht;
    if (document.getElementById("popbox").style.visibility == "" || document.getElementById("popbox").style.visibility == "hidden")
    {
    document.getElementById("popbox").style.visibility = "visible";

        if (navigator.appName=="Microsoft Internet Explorer")
        {
            // The current selection 
            var range = document.selection.createRange(); 

            // We'll use this as a 'dummy' 
            var stored_range = range.duplicate(); 

            // Select all text 
            stored_range.moveToElementText( sub ); 

            // Now move 'dummy' end point to end point of original range 
            stored_range.setEndPoint( 'EndToEnd', range ); 

            // Now we can calculate start and end points 
            sub.selectionStart = stored_range.text.length - range.text.length; 
            sub.selectionEnd = sub.selectionStart + range.text.length; 
        }
            deb = sub.selectionStart;
       fin = sub.selectionEnd;

            document.bbpop.urlname.value = sub.value.substring(deb,fin);
        
        openpop(true);
    } else {
    document.getElementById("popbox").style.visibility = "hidden";
        openpop(false);
        sub.focus();
    }
}

function bburldo(){
    var sub = document.form.bericht;
    var waarde = '[url='+document.bbpop.url.value+']'+document.bbpop.urlname.value+'[/url]';

    openpop(false);

    voorsel = sub.value.substring(0,deb);
    nasel = sub.value.substring(fin,sub.value.length);

    sub.value = voorsel + waarde + nasel;
    
    document.bbpop.url.value = 'http://';
    document.bbpop.urlname.value = '';
    document.getElementById("popbox").style.visibility = "hidden";
    sub.focus();
}

function openpop(type){
    var sub = document.form;

    document.form.bericht.disabled = type;

    sub.bold.disabled = type;
    sub.italic.disabled = type;
    sub.underline.disabled = type;
    sub.submit.disabled = type;
    sub.reset.disabled = type;
}