JavaScript - Wish To Use The Same Method Of Inserting Smiles In My Text Boxes, Like Here On Cf.com

The below code is not inserting the smile into the textbox.
In IE8 I get an error around
Code:

if((sel.type == "Text" || sel.type == "None") && rng != null)

In Firefox 3.5 I get an error around:
Code:

if (es <= 2)

Each textarea has: id and name
Code:

<textarea class="textinput" id="about_me" name="about_me" cols="45" rows="6">

Here is the whole smile code I am using.

Code:

//Smile Start 
var myAgent   = navigator.userAgent.toLowerCase();
var myVersion = parseInt(navigator.appVersion);

var is_ie  = ((myAgent.indexOf("msie") != -1)  && (myAgent.indexOf("opera") == -1));
var is_nav = ((myAgent.indexOf('mozilla')!=-1) && (myAgent.indexOf('spoofer')==-1) && (myAgent.indexOf('compatible') == -1) && (myAgent.indexOf('opera')==-1) && (myAgent.indexOf('webtv') ==-1) && (myAgent.indexOf('hotjava')==-1));

var is_win = ((myAgent.indexOf("win")!=-1) || (myAgent.indexOf("16bit")!=-1));
var is_mac = (myAgent.indexOf("mac")!=-1);

function smile( txt ) {
//    document.all.txtmessage.value = document.all.txtmessage.value + txt;
//    	return false;
	doInsert(" " + txt + " ", "", false,document.getElementById('txtmessage'));             
}
function smile2( txt ) {
	doInsert(" " + txt + " ", "", false,document.getElementById('txttemplate'));
}
 function doInsert(ibTag, ibClsTag, isSingle, name_txt)
{
	var isClose = false;
	var obj_ta = name_txt;


	//----------------------------------------
	// It's IE!
	//----------------------------------------
if ( (myVersion >= 4) && is_ie && is_win)
//	if ( (ua_vers >= 4) && is_ie && is_win)
	{
		if (obj_ta.isTextEdit)
		{
			obj_ta.focus();
			var sel = document.selection;
			var rng = sel.createRange();
			rng.colapse;
			if((sel.type == "Text" || sel.type == "None") && rng != null)
			{
				if(ibClsTag != "" && rng.text.length > 0)
					ibTag += rng.text + ibClsTag;
				else if(isSingle)
					isClose = true;

				rng.text = ibTag;
			}
		}
		else
		{
  //-- mod_bbcode begin
          // this should work with Mozillas
          if ( (myVersion >= 4) && is_win) {
              var length = obj_ta.textLength;
              var start = obj_ta.selectionStart;
              var end = obj_ta.selectionEnd;
              if (end == 1 || end == 2)
                  end = length;
              var head = obj_ta.value.substring(0,start);
              var rng = obj_ta.value.substring(start, end);
              var tail = obj_ta.value.substring(end, length);
              if( start != end ){
                  if (ibClsTag != "" && length > 0)
                      ibTag += rng + ibClsTag;
                  else if (isSingle)
                      isClose = true;
                  rng = ibTag;
                  obj_ta.value = head + rng + tail;
                  start = start + rng.length;
              }
              else{
                  if(isSingle)
                      isClose = true;
                  obj_ta.value = head + ibTag + tail;
                  start = start + ibTag.length;
              }
              obj_ta.selectionStart = start;
              obj_ta.selectionEnd = start;
          }
          else {
  //-- mod_bbcode end  
    			if(isSingle)
    			{
    				isClose = true;
    			}
    			
    			obj_ta.value += ibTag;
    //-- mod_bbcode begin
         }
    //-- mod_bbcode end          
		}
	}
	//----------------------------------------
	// It's MOZZY!
	//----------------------------------------
	
else if ( obj_ta.selectionEnd )
	{ 
		var ss = obj_ta.selectionStart;
		var st = obj_ta.scrollTop;
		var es = obj_ta.selectionEnd;
		
		if (es <= 2)
		{
			es = obj_ta.textLength;
		}
		
		var start  = (obj_ta.value).substring(0, ss);
		var middle = (obj_ta.value).substring(ss, es);
		var end    = (obj_ta.value).substring(es, obj_ta.textLength);
		
		//-----------------------------------
		// text range?
		//-----------------------------------
		
		if (obj_ta.selectionEnd - obj_ta.selectionStart > 0)
		{
			middle = ibTag + middle + ibClsTag;
		}
		else
		{
			middle = ibTag + middle;
			
			if (isSingle)
			{
				isClose = true;
			}
		}
		
		obj_ta.value = start + middle + end;
		
		var cpos = ss + (middle.length);
		
		obj_ta.selectionStart = cpos;
		obj_ta.selectionEnd   = cpos;
		obj_ta.scrollTop      = st;

	}
	//----------------------------------------
	// It's CRAPPY!
	//----------------------------------------
	else
	{
		if (isSingle)
		{
			isClose = true;
		}
		
		obj_ta.value += ibTag;
	}
	
	obj_ta.focus();

	return isClose;
}
//Smile End

Hi im new to this site and im a begginer, so forgive me for any grammatical errors please.

How would I go about running a program onclick or onblur and displaying the result on same page without it changing?

Hello,

I need your help,

I would to like to insert some styled text into an HTML document using innerHTML and a Div.

What would be the code to insert some text with a different font, size and color?

Any help is appreciated.

Thanks,

J

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>

Hi,
I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look.


<html>
<!-- esp.html Nick Bravante -->
<!-- C -->
<!-- ======================= -->

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

number = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guessOne + " My number was " + number + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 1"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBox" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBoxTwo
{
var number;

numberTwo = RandomInt(1, 4);

document.getElementById('messageBoxTwo').value=
"You guessed " + guessTwo + " My number was " + numberTwo + ".";
}

</script>
</head>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberThree = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guess + " My number was " + numberThree + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 2"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxTwo" size="90" />
</p>
</body>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 3"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxThree" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberFour = RandomInt(1, 4);

document.getElementById('messageBoxFour').value=
"You guessed " + guessFour + " My number was " + numberFour + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 4"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxFour" size="90" />
</p>
</body>
</html>