button target textarea

**insanemonkey** · 10-06-2007, 09:18 AM

well I didn't know how to label this, but here I go..

I have a forum and on my reply page i have a textarea where people put text(obviously) but on that page I want to put smilies..

lets say I have a image on that page that when you push it, it will send a message to the textarea and put text into the textarea, is this possible?

If you guys are going to say, Use the WYSIWYG thingy but I dont want all those things and I want mine totally different, so please you javascript coders here my roar,lol...

Thanks...

I have posted this a long time ago kinda but no one answered my last question.
link to it is here: http://www.dynamicdrive.com/forums/s...light=textarea

and read last post...

I want to have like 8 buttons and all buttons with different outputs...

**coothead** · 10-06-2007, 11:34 AM

Hi there insanemonkey,

have a look at this example - (thanks to http://www.dynamicdrive.com/forums for the use of their smilies

) - it may suit your requirements...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<base href="http://www.dynamicdrive.com/forums/images/smilies/">

<style type="text/css">
body {
    background-color:#ffe;
 }
#smilies,#container {
   text-align:center;
}
#smilies img {
    padding:0.7em;
    border:1px solid #999;
    margin:0.6em 0.2em;
    background-color:#fff;
    cursor:pointer;
 }
#ta {
    width:24em;
    height:7em;
    padding:1em;
    border:1px solid #999;
    background-color:#ff9;
    font-family:verdan,arial,helvetica,sans-serif;
    font-size:1em;
    color:#600;
 }
</style>

<script type="text/javascript">
window.onload=function() {
   pic=document.getElementById('smilies').getElementsByTagName('img');
for(c=0;c<pic.length;c++) {
   pic[c].id=c;
   pic[c].onclick=function(){
   addTextToTextarea(this.id);
   }
  }
 }
function addTextToTextarea(num){

    message=[
             'message one',
             'message two',
             'message three',
             'message four',
             'message five',
             'message six',
             'message seven',
             'message eight'];

   document.getElementById('ta').value=message[num];
 }
</script>

</head>
<body>

<div id="smilies">
<img src="smile.gif" alt=""/>
<img src="rolleyes.gif" alt=""/>
<img src="mad.gif" alt=""/>
<img src="tongue.gif" alt=""/>
<img src="wink.gif" alt=""/>
<img src="biggrin.gif" alt=""/>
<img src="redface.gif" alt=""/>
<img src="frown.gif" alt=""/>
</div>

<div id="container">
<textarea id="ta" rows="1" cols="1"></textarea>
</div>

</body>
</html>

coothead

**insanemonkey** · 10-06-2007, 05:07 PM

Ok there is one problem, when I write text in the box the text dissapears and it just shows message one,two,three... its there a way to add it into the box without it deleting the message...

**insanemonkey** · 10-06-2007, 05:49 PM

sorry for double posting... but I think dynamcidrive should put this on thier website...

Code:

<SCRIPT LANGUAGE=javascript>
<!--
	var undoLastText = "Reset (no previous record)"
						
	function storeCaret(TextAreaContent)
	 {
	  if (TextAreaContent.createTextRange) TextAreaContent.caretPos = document.selection.createRange().duplicate();
	 }
	function insertAtCaret(TextAreaContent, text)
	 {
	  if (TextAreaContent.createTextRange && TextAreaContent.caretPos)
	   {				   
	    var caretPos = TextAreaContent.caretPos;
		undoLastText = document.all.frmAdd1.Copy.value;							    
	    caretPos.text = '['+text+']'+caretPos.text+'[/'+text+']';
	   	document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');
	    
	   }
	  else
	   alert("Please select some text for formatting");
	 }
	function insertLinkAtCaret(TextAreaContent, text)
	 {
	  if (TextAreaContent.createTextRange && TextAreaContent.caretPos)
	   {
	    var caretPos = TextAreaContent.caretPos;
		undoLastText = document.all.frmAdd1.Copy.value;								    
	    cheese = prompt('Please enter the full URL for this link','http://');
	    caretPos.text = '['+text+'="'+cheese+'"]'+caretPos.text+'[/'+text+']';
	   	document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');
	   }
	  else
	   alert("Please select the word or phrase which you wish to hyperlink");
	 }	 
	function replace(string,text,by) {
	// Replaces text with by in string
	    var strLength = string.length, txtLength = text.length;
	    if ((strLength == 0) || (txtLength == 0)) return string;

	    var i = string.indexOf(text);
	    if ((!i) && (text != string.substring(0,txtLength))) return string;
	    if (i == -1) return string;

	    var newstr = string.substring(0,i) + by;

	    if (i+txtLength < strLength)
	        newstr += replace(string.substring(i+txtLength,strLength),text,by);

	    return newstr;
	}
	function undoLast()
	 {
		document.all.frmAdd1.Copy.value = undoLastText;
	   	document.all.FinishedText.innerHTML = replace(document.all.frmAdd1.Copy.value,'\n','<BR>');
		
	 }
//-->
</SCRIPT>


</HEAD>
<BODY>



<FORM ID="frmAdd1" NAME="frmAdd1">

TEXTAREA:<BR>

<TEXTAREA STYLE="padding: 5px; background: palegreen; border: 1px solid black; font-family: verdana, arial, sans-serif; color: black; font-size: 10pt; width: 360;" COLS="50" ROWS="7" NAME="Copy" ID="Copy" onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);">I wandered lonely as a cloud
That floats on high o'er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils,
Beside the lake, beneath the trees,
Fluttering and dancing in the breeze.</TEXTAREA><P>

<SPAN STYLE="font-family: verdana, arial, sans-serif; font-size: 8pt;">Select some text above, then click a format button - a bit like in Word</SPAN><P>

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-weight: bold; width: 30px;" VALUE="B" onClick="insertAtCaret(this.form.Copy,'B');" ID="BoldButton" NAME="BoldButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-style: italic; font-weight: bolder; width: 30px;" VALUE="I" onClick="insertAtCaret(this.form.Copy,'I');" ID="ItalicButton" NAME="ItalicButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; text-decoration: underline; font-weight: bolder; width: 30px;" VALUE="U" onClick="insertAtCaret(this.form.Copy,'U');" ID="ItalicButton" NAME="ItalicButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; text-decoration: underline; font-weight: bolder; width: 80px; color: blue; cursor: hand;" VALUE="Add Link" onClick="insertLinkAtCaret(this.form.Copy,'url');" ID="LinkButton" NAME="LinkButton">&nbsp;&nbsp;

<INPUT TYPE="BUTTON" STYLE="font-family: verdana, arial, sans-serif; font-weight: bolder; width: 80px; color: green; cursor: hand;" VALUE="Undo Last" onClick="undoLast();" ID="UndoButton" NAME="UndoButton"><P>

<BR><BR>
<img src="http://www.xudas.com/images/xudasaffy.gif" border="0" onClick="undoLast();" ID="UndoButton" NAME="UndoButton"><P>


</FORM>
</BODY>
</HTML>

I was playing with this.. and it works better then yours .. Thanksyou though..

**coothead** · 10-06-2007, 06:00 PM

Hi there insanemonkey,

when I write text in the box the text dissapears and it just shows message one,two,three...
is there a way to add it into the box without it deleting the message...

change this line...

Code:

document.getElementById('ta').value=message[num];

...to this...

Code:

document.getElementById('ta').value+='\n'+message[num];

coothead
p.s.

I was playing with this.. and it works better then yours ..

Have you tried it in FireFox?

**insanemonkey** · 10-07-2007, 02:32 PM

Thankyou so much, i am going to test it later..

Thread: button target textarea

Thread Tools

Search Thread

button target textarea

Bookmarks

Bookmarks

Posting Permissions