Avatar billede htm Nybegynder
07. november 2004 - 17:17 Der er 8 kommentarer og
1 løsning

Indsæt tag på cursors plads i textarea

Hey hey

Jeg har denne kode:

function InsertTag(tag)
{
    var cursorpos;
    var starttext = "<"+tag+">";
    var sluttext = "</"+tag+">";
    f = document.mailformen.elements['tekst'];
    if (f.selectionEnd != undefined)
    {
        cursorpos = f.selectionEnd+starttext.length+sluttext.length;
        f.value = InsertStr(f.value,starttext,sluttext,f.selectionStart,f.selectionEnd);
        f.focus();
        f.setSelectionRange(cursorpos,cursorpos);
    }
    else if ( document.selection )
    {
        r = document.selection.createRange();
        if ( r.text != "" )
            r.text = starttext + r.text + sluttext;
        else
            f.value += starttext + sluttext;
        document.selection.empty();
        f.focus();
    }
    else
        alert("Denne funktion er ikke supportet i din browser.\n\nSkriv manuelt <"+tag+"> og </"+tag+"> omkring din tekst");
}
function InsertStr(input_str,startStr,endStr,posStart, posSlut)
{
    var selText = input_str.substr(posStart,(posSlut-posStart));
    selText =  startStr + selText + endStr;
    return input_str.substring(0,posStart) + selText + input_str.substr(posSlut);
}

og kalder den med: onclick="InsertTag('b');"

Det virker perfekt i Firefox, men i IE virker det ikke helt efter hvad jeg kunne tænke mig.
som det er nu skal jeg markere før den smider det ind på det markerede område. jeg vil gerne have at:
- tagstart og tagslut kommer ind på cursorens placering, med en evt markering i mellem.
- cursoren hopper til enden af markeringen, altså efter endtag.

uden if ( r.text != "" ) smider den start og slut ind i starten af body.

Hvordan blier mit eks modificeret til at virke perfekt i IE ?
Avatar billede skovenborg Nybegynder
07. november 2004 - 22:49 #1
kunne du evt. fristes med:
http://skovenborg.frac.dk/javascript/insertTag.php
evt. lige modificere den så den implementerer:
f.focus();
        f.setSelectionRange(cursorpos,cursorpos);
Avatar billede htm Nybegynder
08. november 2004 - 18:14 #2
Ja den er helt perfekt ;-) - det er utroligt hvad focus() kan gøre...

Har kun det problem at der ikke kommer fokus tilbage på feltet. focus() hjælper tilsyneladende ikke der ?

min kode:

else if ( document.selection )
{
    f.focus();
    r = document.selection.createRange();
    r.text = starttext + r.text + sluttext;
    document.selection.empty();
    f.focus();
}
Avatar billede htm Nybegynder
08. november 2004 - 18:17 #3
uden
document.selection.empty();
f.focus();

virker det fint når cursoren står alene - men når der er markeret noget bliver det ikke afmarkeret igen.
Avatar billede skovenborg Nybegynder
08. november 2004 - 22:35 #4
Hmm, ja så er jeg tilbage - og undskyld ventetiden ;-)

Hvis vi kombinerede dit script med mit forrige og http://skovenborg.frac.dk/javascript/insertText.php ja så tror jeg det burde virke:
----------------
  var cursorpos;
  function InsertTag(tag)
{

    var starttext = "<"+tag+">";
    var sluttext = "</"+tag+">";
    f = document.mailformen.elements['tekst'];
    if (f.selectionEnd != undefined)
    {
        f.value = InsertStr(f.value,starttext,sluttext,cursorpos.start,cursorpos.end);
        cursorpos.start += starttext.length;
        cursorpos.end += sluttext.length-1;
        f.setSelectionRange(cursorpos.start,cursorpos.end);
        f.focus();
    }
    else if (document.selection)
    {
        r = cursorpos.range;
        r2 = r.duplicate();
        str = r.text;
        r.text = starttext + r.text + sluttext;
        r2.findText(str);
        f.focus();
        r2.select();
    }
    else
        alert("Denne funktion er ikke supportet i din browser.\n\nSkriv manuelt <"+tag+"> og </"+tag+"> omkring din tekst");
}
function InsertStr(input_str,startStr,endStr,posStart, posSlut)
{
    var selText = input_str.substr(posStart,(posSlut-posStart));
    selText =  startStr + selText + endStr;
    return input_str.substring(0,posStart) + selText + input_str.substr(posSlut);
}
function storeCaretPos(frmElm) {
    if (typeof frmElm.selectionEnd == "number") {
        cursorpos = {start:frmElm.selectionStart,end:frmElm.selectionEnd}
    }
    else if (document.selection) {
        cursorpos = {range:document.selection.createRange().duplicate()}
    }
    else;
}

<form name="mailformen">
<textarea name="tekst" onfocus="storeCaretPos(this);" onmouseup="storeCaretPos(this)" onkeyup="storeCaretPos(this);"></textarea>
<input type="button" value="B" onmouseup="InsertTag('B');cursorpos = null;" />
</form>
Avatar billede htm Nybegynder
10. november 2004 - 21:29 #5
Jeg kunne slet ikke få dit eksmepel til at virke efter hensigten, og fik fejl nogle gange.
Derudover tror jeg du misforstod mig lidt, jeg ville ikke have teksten markeret igen, men bare cursoren til at hoppe til enden af teksten eks.

vi markerer med og trykke knappen - så står der <b>med</b> og så skal cursoren være efter </b>

men jeg brugte dit eksempel til inspiration og fandt et virkende, og efter min mening meget mere enkelt ekspempel. Du kan se eks. her: http://munchi.dk/misc/inserttag.html

Du må meget gerne lige komme med kommentar om det ligner et der vil virke?

Eller rettere kommentar er ikke nok ;o) - du må gerne smide et svar.
Avatar billede htm Nybegynder
10. november 2004 - 21:38 #6
Har også lige fundet ud af, at der er mange egenskaber til CreateRange objektet: http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp

bla moveEnd og moveStart kunne også være brugbare i denne situation.
Avatar billede htm Nybegynder
12. november 2004 - 10:06 #7
skovenborg>> Ville du smide et svar ?
Avatar billede skovenborg Nybegynder
12. november 2004 - 13:19 #8
jo det skal jeg nok ;-)
men var http://munchi.dk/misc/inserttag.html ikke bare den du havde fra starten af? Er der nogle ting som du vil have ændret i det eller...?

Men ud over det så ser det meget fornuftigt ud... lige borset fra:
else
        alert("Denne funktion er ikke supportet i din browser.\n\nSkriv manuelt <"+tag+"> og </"+tag+"> omkring din tekst");
som jeg egentlig ikke bryder mig så meget om. Egentlig ville jeg have foretrukket:
else {
    f.value += starttext + sluttext;
}
men det må du selvfølgelig selv om :-)
Avatar billede htm Nybegynder
12. november 2004 - 13:35 #9
nej forskellen på den jeg havde fra start af og den der er der nu er at den der er der nu virker med de ting jeg manglede i den til at starte med :-)

og egentlig har du ret med min alert() - men lige i denne situation er det til et internt administrationsinterface, hvor det ikke er så godt at det bliver tilføjet i slutningen :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester