|
| JavaScript: Textarea problem Fra : Mads Pedersen |
Dato : 24-11-01 14:42 |
|
Forestil jer at jeg har et textarea der indeholder flg: "Noget af teksten
skal være med fed skrift!" Nu vil jeg gerne kunne markere "fed" med musen og
så trykke på en knap som kalder en funktion, der indsætter "<b>" FØR det
valgte og "</b>" EFTER det valgte.
Hvordan kan man lave sådan en funktion? Forventer selvfølgelig ikke at I
skal skrive den for mig, men I ved sikkert hvor jeg skal starte med at lede
efter en passende javascript kommando.
På forhånd tak,
// Mads
| |
Jonas Koch Bentzen (24-11-2001)
| Kommentar Fra : Jonas Koch Bentzen |
Dato : 24-11-01 15:06 |
|
Mads Pedersen skrev:
>
> Forestil jer at jeg har et textarea der indeholder flg: "Noget af
> teksten skal være med fed skrift!" Nu vil jeg gerne kunne markere
> "fed" med musen og så trykke på en knap som kalder en funktion, der
> indsætter "<b>" FØR det valgte og "</b>" EFTER det valgte.
>
> Hvordan kan man lave sådan en funktion? Forventer selvfølgelig ikke at
> I skal skrive den for mig, men I ved sikkert hvor jeg skal starte med
> at lede efter en passende javascript kommando.
Der er *meget*, du skal lave (du skal med andre ord ikke lede efter én
bestemt kommando) - og forvent ikke, det virker i andre browsere end
Internet Explorer. Jeg prøvede for nogle måneder siden at lave noget
lignende i andre, moderne browsere, og det var umuligt.
--
Jonas Koch Bentzen
http://understroem.dk/
| |
Jonas Koch Bentzen (24-11-2001)
| Kommentar Fra : Jonas Koch Bentzen |
Dato : 24-11-01 15:15 |
|
Jonas Koch Bentzen skrev:
>
> Mads Pedersen skrev:
>>
>> Forestil jer at jeg har et textarea der indeholder flg: "Noget af
>> teksten skal være med fed skrift!" Nu vil jeg gerne kunne markere
>> "fed" med musen og så trykke på en knap som kalder en funktion, der
>> indsætter "<b>" FØR det valgte og "</b>" EFTER det valgte.
>>
> Jeg prøvede for nogle måneder siden at lave noget
> lignende i andre, moderne browsere, og det var umuligt.
Med "umuligt" mener jeg, at det var umuligt at bestemme markørens
position samt at afgøre hvilket område, der er markeret. Det er fint
nok, at man skal ændre hele indholdet af et textarea sådan som Stig
Nygaard foreslog, men problemet er, at i sådanne tilfælde bliver
markøren som regel placeret allerførst eller allersidst i textareaet.
Det gør, at brugeren så skal bruge musen eller piletasterne for at
komme tilbage til det sted, hvor han var før han trykkede på
"Fed"-knappen.
>
--
Jonas Koch Bentzen
http://understroem.dk/
| |
Mads Pedersen (24-11-2001)
| Kommentar Fra : Mads Pedersen |
Dato : 24-11-01 17:06 |
|
in article 9to9gb$9bs$2@sunsite.dk, Jonas Koch Bentzen at
ingen.emailadresse@eksempel.dk wrote on 24/11/01 15:06:
>> Forestil jer at jeg har et textarea der indeholder flg: "Noget af
>> teksten skal være med fed skrift!" Nu vil jeg gerne kunne markere
>> "fed" med musen og så trykke på en knap som kalder en funktion, der
>> indsætter "<b>" FØR det valgte og "</b>" EFTER det valgte.
>>
>> Hvordan kan man lave sådan en funktion? Forventer selvfølgelig ikke at
>> I skal skrive den for mig, men I ved sikkert hvor jeg skal starte med
>> at lede efter en passende javascript kommando.
>
> Der er *meget*, du skal lave (du skal med andre ord ikke lede efter én
> bestemt kommando) - og forvent ikke, det virker i andre browsere end
> Internet Explorer. Jeg prøvede for nogle måneder siden at lave noget
> lignende i andre, moderne browsere, og det var umuligt.
OK jeg er ikke doven og jeg mangler heller ikke lysten/modet til at gå i
gang med at lave ovenstående. Mht. til browserkompatibilitet så er jeg ikke
så kræsen da scriptet skal bruges på en administrationsside. Det skal bare
virke på IE5+ til både Mac og PC.
Så vidt jeg kan se er der nogle centrale funktioner som er nødvendig for at
kunne løse opgaven (der er sikkert andre algoritmer, men den her virker
enkel):
1. Find cursor-position svarende til Selection Start og Selection End.
2. Klippe indholdet af Textarea op i tre bidder: Textarea Start til
Selection Start, Selection Start til Selection End, og Selection end til
Textarea Slut.
3. Klistre stykkerne sammen igen med de relevante "tags" ind imellem.
4. Smid det tilbage ind i textarea'et
5. Lave ny selection i textarea så det valgte stadig er valgt efter
indsættelse af "tags".
Uden at jeg er den store JavaScript haj skulle jeg mene at punkt 2+3+4
skulle være til at klare uden de store problemer. Men har I nogen idéer til
hvordan man klarer punkt 1+5 ???
Tak,
// Mads
| |
Jonas Koch Bentzen (24-11-2001)
| Kommentar Fra : Jonas Koch Bentzen |
Dato : 24-11-01 18:04 |
|
Mads Pedersen skrev:
>
> Mht. til browserkompatibilitet så er
> jeg ikke så kræsen da scriptet skal bruges på en administrationsside.
> Det skal bare virke på IE5+ til både Mac og PC.
Glem Mac'en. Internet Explorer til Mac er langt mere standardkompatibel
end Windows-udgaven - og netop fordi, den følger standarderne
ordentligt, kan man ikke lave det, du vil.
--
Jonas Koch Bentzen
http://understroem.dk/
| |
Mads Pedersen (24-11-2001)
| Kommentar Fra : Mads Pedersen |
Dato : 24-11-01 18:20 |
|
in article 9tojt4$6rq$1@sunsite.dk, Jonas Koch Bentzen at
ingen.emailadresse@eksempel.dk wrote on 24/11/01 18:03:
>> Mht. til browserkompatibilitet så er
>> jeg ikke så kræsen da scriptet skal bruges på en administrationsside.
>> Det skal bare virke på IE5+ til både Mac og PC.
>
> Glem Mac'en. Internet Explorer til Mac er langt mere standardkompatibel
> end Windows-udgaven - og netop fordi, den følger standarderne
> ordentligt, kan man ikke lave det, du vil.
Er det noget du tror eller noget du ved?
Løsningen SKAL virke på en Mac, hvis det ikke kan lade sig gøre må jeg finde
på noget andet ;-(
Men jeg vil alligevel gerne ha' tips til at få det til at virke på PC!!!
// Mads
| |
Jonas Koch Bentzen (24-11-2001)
| Kommentar Fra : Jonas Koch Bentzen |
Dato : 24-11-01 19:06 |
|
Mads Pedersen skrev:
>
> in article 9tojt4$6rq$1@sunsite.dk, Jonas Koch Bentzen at
> ingen.emailadresse@eksempel.dk wrote on 24/11/01 18:03:
>
>>> Mht. til browserkompatibilitet så er
>>> jeg ikke så kræsen da scriptet skal bruges på en
>>> administrationsside. Det skal bare virke på IE5+ til både Mac og PC.
>>
>> Glem Mac'en. Internet Explorer til Mac er langt mere
>> standardkompatibel end Windows-udgaven - og netop fordi, den følger
>> standarderne ordentligt, kan man ikke lave det, du vil.
>
> Er det noget du tror eller noget du ved?
Jeg er ikke helt sikker, men næsten... Hvorfor afprøver du det ikke
bare?
> Men jeg vil alligevel gerne ha' tips til at få det til at virke på
> PC!!!
Jeg bruger Linux, og kender derfor ikke særligt meget til Internet
Explorer-specifikke koder.
--
Jonas Koch Bentzen
http://understroem.dk/
| |
Stig Nygaard (24-11-2001)
| Kommentar Fra : Stig Nygaard |
Dato : 24-11-01 15:11 |
|
Hej Mads
Mads Pedersen wrote:
> Forestil jer at jeg har et textarea der indeholder flg: "Noget af teksten
> skal være med fed skrift!" Nu vil jeg gerne kunne markere "fed" med musen og
> så trykke på en knap som kalder en funktion, der indsætter "<b>" FØR det
> valgte og "</b>" EFTER det valgte.
Du skal ud i noget DOM-manipulation i hvert fald (Dynamisk HTML). Kan
sagtens lade sig gøre at manipulere med indholdet i et textarea,
problemet er at finde ud af /hvor/ der er markeret. Jeg mener emnet med
at finde markeringer har været diskuteret på
http://groups.yahoo.com/group/wdf-dom for nylig, men kan ikke lige huske
hvad konklussionen blev. Men du burde måske gå lidt på jagt i arkivet der.
Indholdet af et textarea kan skrives og læses som i følgende eksempel:
<HTML>
<HEAD>
<TITLE>Textarea test</TITLE>
<SCRIPT language="Javascript" type="text/javascript">
function get() {
alert(document.getElementById("tekst").value);
}
function set() {
document.getElementById("tekst").value="Nyt indhold";
}
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA id="tekst">
Dette er en test
</TEXTAREA>
<P><A href="javascript:get();">get</A>
<P><A href="javascript:set();">set</A>
</BODY>
</HTML>
Mvh. Stig
stig@rockland.dk
PS. Flere interessante DHTML links på:
http://www.rockland.dk/stig/upghtml.html
| |
Stig Nygaard (24-11-2001)
| Kommentar Fra : Stig Nygaard |
Dato : 24-11-01 15:20 |
|
Hej igen
Mads Pedersen wrote:
> Forestil jer at jeg har et textarea der indeholder flg: "Noget af teksten
> skal være med fed skrift!" Nu vil jeg gerne kunne markere "fed" med musen og
> så trykke på en knap som kalder en funktion, der indsætter "<b>" FØR det
> valgte og "</b>" EFTER det valgte.
Hvis det ikke lykkes at lave noget der kan detektere hvad brugeren har
markeret, så kunne du jo bede brugerne sætte et bestemt (sjældent brugt)
tegn foran og bag det de ønsker "markeret". Så er opgaven i hvert fald
ret let at løse.
Mvh. Stig
stig@rockland.dk
PS. Flere interessante DHTML links på:
http://www.rockland.dk/stig/upghtml.html
| |
Tore Nordbø (25-11-2001)
| Kommentar Fra : Tore Nordbø |
Dato : 25-11-01 00:21 |
|
"Mads Pedersen" <mads@imv.au.dk> wrote in message
news:B825622A.2ACBF%mads@imv.au.dk...
> Forestil jer at jeg har et textarea der indeholder flg: "Noget af teksten
> skal være med fed skrift!" Nu vil jeg gerne kunne markere "fed" med musen
og
> så trykke på en knap som kalder en funktion, der indsætter "<b>" FØR det
> valgte og "</b>" EFTER det valgte.
>
> Hvordan kan man lave sådan en funktion? Forventer selvfølgelig ikke at I
> skal skrive den for mig, men I ved sikkert hvor jeg skal starte med at
lede
> efter en passende javascript kommando.
slik f.eks?:
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
function fedFunk() {
Selected = document.selection.createRange().text
document.selection.createRange().text = "<b>" + Selected + "</b>"
return;
}
</SCRIPT>
</head>
<body bgcolor="#FFFFFF">
<form name="form" method="post" action="">
<textarea cols="50" rows="10"></textarea>
<input type="button" name="button" onclick=fedFunk() value="Fed">
</form>
</body>
</html>
mvh Tore
| |
Mads Pedersen (25-11-2001)
| Kommentar Fra : Mads Pedersen |
Dato : 25-11-01 10:37 |
|
in article 9tp9sn$410us$1@ID-101524.news.dfncis.de, Tore Nordbø at
tore@tonor.com wrote on 25/11/01 0:20:
> <html>
> <head>
> <title></title>
> <SCRIPT LANGUAGE="JavaScript">
> function fedFunk() {
> Selected = document.selection.createRange().text
> document.selection.createRange().text = "<b>" + Selected + "</b>"
> return;
> }
> </SCRIPT>
> </head>
> <body bgcolor="#FFFFFF">
> <form name="form" method="post" action="">
> <textarea cols="50" rows="10"></textarea>
> <input type="button" name="button" onclick=fedFunk() value="Fed">
> </form>
> </body>
> </html>
Det virker perfekt i IE5 f/PC!
Men det duer ikke på Mac ;-(
Kan det virkeligt passe at det ikke kan lade sig gøre på "da Mac" ???
// Mads
| |
|
|