Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 20:30 Der er 21 kommentarer og
1 løsning

onclick opdatering af textarea

Man skal klikke på en xx.gif og dermed indsættes noget tekst i et Textarea. Ikke!! bare til sidst, men der hvor markøren er.
Det andet har jeg prøvet med "form.description.value+=tekst"

Jeg har dette script som køres men der sker intet. Det er lånt fra et sted hvor det virker. Hvad pokker gør jeg galt?

Mit textarea hedder "description" og "icon" som input er den tekststreng som skal indsættes.

<SCRIPT>

function insertIconCode(icon){
var input = document.forms[0].description;
    if (input.setSelectionRange) {
    var selectionStart = input.selectionStart;
    var selectionEnd = input.selectionEnd;
    input.value = input.value.substring(0, selectionStart) + " " + icon + " " + input.value.substring(selectionEnd);
    input.setSelectionRange(selectionStart + text.length, selectionStart + text.length);
    input.focus();
    }
    else if (document.selection) {
    var range = document.selection.createRange();
    if (range.parentElement() == input)
    range.text = " " + icon + " ";
    }
    input.focus();
}

</SCRIPT>

Hvis I har noget helt andet kode som blot løser problemet med at indsætte ved markøren, så må min kode indtil nu gerne skrottes.
Avatar billede nmh Nybegynder
16. februar 2004 - 20:37 #1
Avatar billede nmh Nybegynder
16. februar 2004 - 20:38 #2
ups: Nu så jeg det er til Netscape 6+.
Det virker næppe i IE.
Avatar billede nmh Nybegynder
16. februar 2004 - 20:51 #3
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 21:02 #4
Ikke helt, men det har nogle gode sider.
Dit link er jo kodeindsættelse. Dvs. den sætter tags på hver side af teksten. Jeg vil bare have teksten ind een gang.

http://www.eksperten.dk/spm/423066

Det ovenstående link hjalp mig en del, men mangler en vigtig ting.
Når jeg har klikket på en knap og indsat teksten, så mister textarea'et fokus og man skal klikke på det førend man kan forsætte sit arbejde. Kan du hjælpe med det?
Herunder ser du koden som blot mangler "automatisk fokus tilbage til textarea efter indsættelse"

<html>
<head>
<script>
var harFokus = false;

function indsaet(str) {
  if (harFokus) {
    rng = document.selection.createRange();
    rng.text = str;
   
   
  }
}
</script>
</head>

<body>
<form name=form>
<textarea onfocus="harFokus = true;" onblur="harFokus = false;" style="width:644px;height:390px;">
</textarea>
</form>

<br>

<input value=":-)" type="button" onmousedown="indsaet(':-)');">
<input value=";-)" type="button" onmousedown="indsaet(';-)');">
<input value=":-D" type="button" onmousedown="indsaet(':-D');">
<input value=":-p" type="button" onmousedown="indsaet(':-p');">

<a href="java script:void(0);" onclick="indsaet(':-p');return false"><img src="../images/icons/1.gif" style="border:0px;"></a>
</body>
</html>

PS. Hvorfor virker min gif ikke som en knap? Kun BUTTOM som virker
Avatar billede nmh Nybegynder
16. februar 2004 - 21:58 #5
Det er ret let at ændre det link jeg gav til kun at indsætte de tegn, du vil have indsat. Focus bliver nu bevaret.
<html>
<head>
      <title>Untitled</title>
</head>

<body>
<script language=javascript>
<!--

function markSelection ( txtObj ) {
if ( txtObj.createTextRange ) {
  txtObj.caretPos = document.selection.createRange().duplicate();
  isSelected = true;
}
}

function insertTag ( txtName, tag, enclose ) {
var closeTag = tag;
if ( enclose ) {
  var attribSplit = tag.indexOf ( ' ' );
  if ( tag.indexOf ( ' ' ) > -1 )
    closeTag = tag.substring ( 0, attribSplit );
}
if ( isSelected ) {
  var txtObj = eval ( "document.forms[0]." + txtName );
  if (txtObj.createTextRange && txtObj.caretPos) {
    var caretPos = txtObj.caretPos;
    caretPos.text = ( ( enclose ) ? tag+caretPos.text : tag+caretPos.text
);
    markSelection ( txtObj );
    if ( txtObj.caretPos.text=='' ) {
      isSelected=false;
  txtObj.focus();
    }
  }
} else {
  // placeholder for loss of focus handler
}
}

//-->
</script>

<form>
<textarea name="tsttxt" cols=10 rows=20 ONSELECT="markSelection(this);" ONCLICK="markSelection(this);"

ONKEYUP="markSelection(this);"></textarea><input
type="button" value=":-)" onClick="insertTag ( 'tsttxt', ':-)', true )"> <input type="button" value=":-D"
onClick="insertTag ( 'tsttxt', ':-D', false )">
</form>
</body>
</html>
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 22:21 #6
Det er jo næsten 100%....En enkelt mere og så får du klart points..
Hvis jeg klikker på den tekst med "Det er ret let ...:" altså uden for textarea og SÅ trykker på knapperne, laver den een smiley derude....
Kan du "låse" for det?
Avatar billede nmh Nybegynder
16. februar 2004 - 22:22 #7
Hvis du vil have dit eget forslag ændret, så fokus bliver iorden, skal der tilføjes en hel del, så vidt jeg kan se. Og så kommer det til at minde om det seneste forslag. Det letteste var derfor at ændre lidt på forslaget fra linket. her er der dog stadig noget overflødigt, men det skader ikke.
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 22:28 #8
ENKELT lille ting?
Når jeg klikker på en knap og bagefter skriver = fint
klikker jeg to gange, så virker den ikke 2. gang...så mister den fokus...
detalje men måske du lige havde en løsning..
Avatar billede nmh Nybegynder
16. februar 2004 - 22:29 #9
Nå vores sidste kommentarer krydsede hinanden.
Jeg tror ikke jeg helt forstår det sidste med at få en smiley uden for tekstområdet.
Det kan jeg ikke få frem.
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 22:38 #10
nej, Nu kan jeg heller ikke mere  *lol*
pokkers...men det sker heller ikke mere...ved ikke lige hvad jeg gjorde forkert..
Men smid et svar og så må jeg leve med at man ikke kan lave to smileys efter hinanden :)
Avatar billede nmh Nybegynder
16. februar 2004 - 22:42 #11
Her er et. :o)
Jeg vil kigge mere på det med de to smileys, men det bliver vist ikke helt let.
Jeg har allerede prøvet lidt forskelligt.
Avatar billede nmh Nybegynder
16. februar 2004 - 22:55 #12
her er løsningen:
I funktionen insertTag(txtName,...)
findes et sted disse 4 linier:

markSelection ( txtObj );
    if ( txtObj.caretPos.text=='' ) {
      isSelected=false;
  txtObj.focus();

Efter linien

txtObj.focus();

skal du tilføje linien

markSelection(txtObj);

Så bliver der indsat smileys hver gang du trykker på en knap. :o)
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 23:01 #13
Kanon!!!! 110% perfekt...
Synd du har 100 i karma....ellers fik du mere
Avatar billede nmh Nybegynder
16. februar 2004 - 23:03 #14
Det glæder mig du er tilfreds. Men man kan aldrig få for meger karma
:o)
Avatar billede Thomas Knudsen Nybegynder
16. februar 2004 - 23:05 #15
Hvorfor er der forresten True, False på knapperne som 3. parameter? Jeg skal have 30 forskellige..
Skal jeg så skifte imellem de to for hver anden knap?
Avatar billede nmh Nybegynder
16. februar 2004 - 23:23 #16
Det er et godt spørgsmål, du der stiller.
Det med true og false er en reminiscens, fra da der blev indsat tags i den oprindelige version.
Du kan kalde den med false hver gang.

Og du kan derfor helt udelade det første i funktionen.
Du kan altså fjerne de første linier i funktionen:

var closeTag;
if ( enclose ) {
  var attribSplit = tag.indexOf ( ' ' );
  if ( tag.indexOf ( ' ' ) > -1 )
    closeTag = tag.substring ( 0, attribSplit );
}

kan fjernes.

Du kan defor også undlade parameteren enclose.
Funktionen skal så blot være

function insertTag(txtName,tag)

og funktionskaldene skal selvfølglig ændres tilsvarende.
Avatar billede nmh Nybegynder
16. februar 2004 - 23:28 #17
ups:
man skal passe på, når man ændrer.
Når alt dette fjernes, så skal linien

caretPos.text = ( ( enclose ) ? tag+caretPos.text : tag+caretPos.text
);
ændres til
caretPos.text = tag+caretPos.text;
Avatar billede nmh Nybegynder
16. februar 2004 - 23:31 #18
Jeg må vist hellere komme med den ændrede version i sin helhed:
<html>
<head>
      <title>Untitled</title>
</head>

<body>
<script language=javascript>
<!--

function markSelection ( txtObj ) {
if ( txtObj.createTextRange ) {
  txtObj.caretPos = document.selection.createRange().duplicate();
  isSelected = true;
}
}

function insertTag ( txtName, tag) {

if ( isSelected ) {
  var txtObj = eval ( "document.forms[0]." + txtName );
  if (txtObj.createTextRange && txtObj.caretPos) {
    var caretPos = txtObj.caretPos;
    caretPos.text = tag+caretPos.text;
    markSelection ( txtObj );
    if ( txtObj.caretPos.text=='' ) {
      isSelected=false;
  txtObj.focus();
  markSelection(txtObj);
    }
  }
} else {
  // placeholder for loss of focus handler
}
}

//-->
</script>

<form>
<textarea name="tsttxt" cols=10 rows=20 ONSELECT="markSelection(this);" ONCLICK="markSelection(this);"

ONKEYUP="markSelection(this)";></textarea><input
type="button" value=":-)" onClick="insertTag ( 'tsttxt', ':-)')"> <input type="button" value=":-D"
onClick="insertTag ( 'tsttxt', ':-D')">
</form>
</body>
</html>
Avatar billede Thomas Knudsen Nybegynder
18. februar 2004 - 23:17 #19
Håber du ser denne kommentar.
Hvis du tjene lidt flere points, så har jeg et ønske:
Klikker jeg på ikon, indsættes det og fokus mistes i tekstfelt.
Først når jeg klikker på et ikon mere kommer forkus tilbage til tekstfeltet.
Hvordan kan jeg klikke 1,2,3,4 og altid have fokus på tekstfeltet efter hver enkelt klik på ikon?
Avatar billede nmh Nybegynder
18. februar 2004 - 23:35 #20
Jeg kigger på det i morgen, men det bliver nok sent på dagen, før jeg får tid.
Avatar billede Thomas Knudsen Nybegynder
19. februar 2004 - 21:55 #21
Jeg har kigget på den gamle kode, som ikke virkede og lavet link til funktion noget om. Nu virker det sgu lige som jeg vil have det til!

function insertIcon(icon){
    var input = document.forms[0].description;
    if (input.setSelectionRange) {
        var selectionStart = input.selectionStart;
        var selectionEnd = input.selectionEnd;
        input.value = input.value.substring(0, selectionStart) + " " + icon + " " + input.value.substring(selectionEnd);
        input.setSelectionRange(selectionStart + text.length, selectionStart + text.length);
        input.focus();
    }
    else if (document.selection) {
        var range = document.selection.createRange();
        if (range.parentElement() == input)
            range.text = " " + icon + " ";
    }
    input.focus();
}

Linket ser således ud
<a href='java script:void(0)' onClick='insertIcon(":-)"); return false;' unselectable=on><img src='../images/icons/1.gif' border=0></a>


Så du skal ikke bruge mere tid på det nu. Men mange tak for alt :)
Avatar billede nmh Nybegynder
19. februar 2004 - 22:34 #22
Selv tak, det var så lidt.
Jeg har lige siddet og bakset med det, men kunne ikke få det forbedret, og skulle netop til at fortælle om det negative resultat. Det var da godt du fik det til at virke, som du ville have det.
Nu vil jeg lige lege lidt med den nye funktion, for at se det virke.
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