Infoga smiley-länk på en viss plats i en text-area i ett formulär

Hej,

Först vill jag börja med tacka alla trevliga och hjälpsamma människor som har gjort att jag kommit en bra bit på väg med utvecklingen av mitt forum. Ovärderligt! Man tror inte det är sant!

Den logiska uppbyggnaden av koden har jag ofta rätt bra koll på medan jag saknar en del spetskompetens :)

Nu till mitt lilla problem. Har för mig att det har funnits trådar tidigare som avhandlat hur man sätter in ex. en smiley vid markörens position i en text-area. Jag lyckades inte hitta den så jag postar en ny tråd.

Så här ser nu sidan ut där användaren skapar en ny tråd (se bild). Jag vill att smiley-bilderna skall vara som länkar som hoppar in i formuläret när man klickar på de. Hur kan man möjliggöra detta med javascript? Komplicerat? :q

http://www.webforum.nu/showthread.php?s=&postid=972293#post972293

Det enda du behöver ändra är det fetstilta nedan:

window.onload = function() {
    fObj = document.forms[[b]"vbform"[/b]].elements[[b]"message"[/b]];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

<a href="#" onclick="smilie(':)'); return false;">smilie</a>

<form name=[b]"vbform"[/b]>
	<textarea cols="20" rows="5" name=[b]"message"[/b]></textarea>
</form>

Peter S skrev:

<a href="#" onclick="smilie(':)'); return false;">smilie</a>

Var härrör sig smilie(':)'); ifrån? Är det en funktion som finns definierad sedan tidigare?

Ja, den finns i det länkade inlägget ovan ;)

Kan jag sätta in min variabel smiley['code'] så här:

<a href="#" onclick="smilie('<?php smiley['code']; ?>'); return false;"><?php echo "img src=\"".smiley['path'].smiley['filename']."\"/>" ?></a>

Det bör gå alldeles utmärkt.

Jag får ett felmeddelande på den raden:

Parse error: syntax error, unexpected '[', expecting ',' or ';' in c:\...

Jag felsökte och felet verkar härröra sig till smilie('<?php smiley['code']; ?>');

Du har glömt ett echo:

<?php echo $smiley['code']; ?>

Red/ Samt ett '$' ;)

Hehe...roligt att jag för en gångs skull fick komma på pinsamheten i felet...

Det borde vara:

<?php echo [B]$[/B]smiley['code']; ?>

Glömde ett $-tecken...förbaskat! Nu fungerar dock funktionen som den ska!

:)

Om jag vill återanvända denna smiley-funktion på både sidan för "nytt inlägg" och "redigera inlägg"? Hur gör jag då? Kan jag skicka med formulärnamnet och namnet på en text-area som argument i funktionen?

Är det inte bara att klistra in all smiley-kod i "redigera"-sidan, precis som i sidan för nytt inlägg?

Jo visst är det det. Men på ett eller två ställen i java-koden är ju variabelnamnen "hårdkodade" (fetstilt) i koden (statiska)...

window.onload = function() {
    fObj = document.forms["[B]vbform[/B]"].elements["[B]message[/B]"];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

<a href="#" onclick="smilie(':)'); return false;">smilie</a>

<form name="[B]vbform[/B]">
	<textarea cols="20" rows="5" name="[B]message[/B]"></textarea>
</form>

Kan man inte bifoga dessa två som argument till funktionen?

Varför vill du göra det? Koden i ditt inlägg nedan skall ju finnas med i båda dessa sidor:

nytt_inlägg.xyz

<script type="text/javascript">

var cPos,
    fObj,
    ieC = Boolean(document.selection && document.selection.createRange);

function smilie(str) {
    if (ieC) {
	if (typeof cPos != "undefined")
	    cPos.text = str;
	else
	    fObj.value = str;
    }

    else if (typeof window.HTMLTextAreaElement != "undefined")
	fObj.value = fObj.value.substring(0, fObj.selectionStart) + str + fObj.value.substring(fObj.selectionEnd);

    else fObj.value += str;
}

function sC() {
    cPos = document.selection.createRange().duplicate();
}

window.onload = function() {
    fObj = document.forms["vbform"].elements["message"];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

<a href="#" onclick="smilie(':)'); return false;">smilie</a>

<form name="vbform">
	<textarea cols="20" rows="5" name="message"></textarea>
</form>

redigera_inlägg.xyz

<script type="text/javascript">

var cPos,
    fObj,
    ieC = Boolean(document.selection && document.selection.createRange);

function smilie(str) {
    if (ieC) {
	if (typeof cPos != "undefined")
	    cPos.text = str;
	else
	    fObj.value = str;
    }

    else if (typeof window.HTMLTextAreaElement != "undefined")
	fObj.value = fObj.value.substring(0, fObj.selectionStart) + str + fObj.value.substring(fObj.selectionEnd);

    else fObj.value += str;
}

function sC() {
    cPos = document.selection.createRange().duplicate();
}

window.onload = function() {
    fObj = document.forms["vbform"].elements["message"];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

<a href="#" onclick="smilie(':)'); return false;">smilie</a>

<form name="vbform">
	<textarea cols="20" rows="5" name="message"></textarea>
</form>

Som jag har strukturerat det nu så ligger denna kod i en och samma fil: function.js. Det är ju där problemet dyker beroende på hur man ser det. Användandet blir ju mer dynamiskt om jag bara behöver ändra i en fil istället för på två ställen i två seperata filler, eller? :)

Det är ju sant. Men jag föreslår istället att formuläret och <textarea>n döps likadant på den andra sidan, som i den första.

Det var ju ett annat mycket klokt sätt att se på det hela ;) Långt utan för de omloppsbanor jag tänker i just nu :e

Det fungerade givetvis...

detta är Exakt det jag vill göra... men har ngra frågor:

1. viss stämmer det att när jag glickar på smile-bilden så infogas tex

   : )

2. var i scripten lägger jag till de olika smile gubbarna ( dvs gif-bilderna)?

3. varifrån kan ajg ladda ner smilisar?

1. Ja
2

<script type="text/javascript">

var cPos,
    fObj,
    ieC = Boolean(document.selection && document.selection.createRange);

function smilie(str) {
    if (ieC) {
	if (typeof cPos != "undefined")
	    cPos.text = str;
	else
	    fObj.value = str;
    }

    else if (typeof window.HTMLTextAreaElement != "undefined")
	fObj.value = fObj.value.substring(0, fObj.selectionStart) + str + fObj.value.substring(fObj.selectionEnd);

    else fObj.value += str;
}

function sC() {
    cPos = document.selection.createRange().duplicate();
}

window.onload = function() {
    fObj = document.forms["vbform"].elements["message"];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

[b]<a href="#" onclick="smilie(':)'); return false;"><img src="happy.gif" height="" width="" alt="" title=":)"></a>[/b]

<form name="vbform">
	<textarea cols="20" rows="5" name="message"></textarea>
</form>

3. En sökning på Google kan resultera i detta

så för varje smily-gubbe jag vill kunna använda mig av skall jag ha en

<a href="#" onclick="smilie('X'); return false;"><img src="happy.gif" height="" width="" alt="" title=":)"></a>

där X variera beroende på vilken gubbe jag klickar på?

Japp. Glöm dessutom inte bort att ändra vissa attribut för <img>-taggarna inom länken ;)