Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Add text in a textares while pressing a button 5

Status
Not open for further replies.

iranor

Programmer
Jun 17, 2004
174
CA
How do you add text in a textarea while pressing a button?

Like when you press the button color , it add the text color in the textarea.
 
function InsertText () {
var text=document.Form1.elements['Button'].value ;
if(TextArea_HasFocus==false)
TextArea_Editor.focus();


var editor = window.document.getElementById('TextArea');
sel = editor.document.selection.createRange();
if (text!=''){
sel.pasteHTML("@@")
sel.pasteHTML(text)
sel.pasteHTML("%%")
TextArea_Editor.focus();
}
}

try this and attach(InsertText()) to attributes tag of the button in asp.net(assuming you are using asp.net)
 
Use this example below to help you figure it out. It puts the foreground and background colors for the button in the text fields.
Code:
<html>
<head>
<script language=JavaScript>

function showColors(obj) {
   blahForm.fgclr.value = obj.currentStyle["color"];
   blahForm.bgclr.value = obj.currentStyle["backgroundColor"];
}

</script>
</head>
<body>
<form name=blahForm>
<input type=button value='Click Me' onclick='showColors(this)'><br>
<input type=text name=fgclr>Foreground Color<br>
<input type=text name=bgclr>Background Color
</form>
</body>
</html>

-kaht

banghead.gif
 
Doh! You asked for a textarea, sorry..... Here's another example:
Code:
<html>
<head>
<script language=JavaScript>

function showColors(obj) {
   blahForm.blahTextArea.value += "Foreground Color: " + obj.currentStyle["color"] + "\n";
   blahForm.blahTextArea.value += "Background Color: " + obj.currentStyle["backgroundColor"] + "\n";
}

</script>
</head>
<body>
<form name=blahForm>
<input type=button value='Click Me' onclick='showColors(this)'><br>
<textarea name=blahTextArea rows=10 cols=50></textarea>
</form>
</body>
</html>

-kaht

banghead.gif
 
I tried , but I was looking to something else...

Like this :

<form>
<input type=button value=Text1>
<input type=button value=Text2>
<textarea></textarea>
</form>

So when you press text1 , the text text1 is added in the text area. When you press text2 , this does the same thing as above.
 
<script language="javascript">
function addTextToFoo(text){
document.FooForm.Foo.value=text;
}
</script>

<form name='FooForm'>
<input type='button' value='Text1' onclick="addTextToFoo('You Clicked Button One!')">
<input type='button' value='Text2' onclick="addTextToFoo('You Clicked Button Two!')">
<textarea name='Foo'></textarea>
</form>
 
Wow, you all make it look so complicated. Here is snip of what I used just a coupla days ago...

Code:
function radioselect()
{
  if (document.frm_name.radiobutton[0].checked)
  {
   document.frm_name.buttonselect.value="One!";
   alert('Correct')
  return true;
  }
}

'buttonselect' is my text area. I am pretty sure this could be done just as easily when a button is pushed. Wouldn't it work like this:
Code:
function radioselect()
{
  {
   document.frm_name.buttonselect.value="One!";
   alert('Correct')
  return true;
  }
}

I guess you could take out the alert (I'm just using it to check on code I can't see happen...)

Dave (who would look for input if this is bad form...)

"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
This is more for what i'm looking for

<script language="javascript">
function addTextToFoo(text){
document.FooForm.Foo.value=text;
}
</script>

<form name='FooForm'>
<input type='button' value='Text1' onclick="addTextToFoo('You Clicked Button One!')">
<input type='button' value='Text2' onclick="addTextToFoo('You Clicked Button Two!')">
<textarea name='Foo'></textarea>
</form>

But I need to add the text at the place where the cursor is , not change the complete form ;)
LIke , if I press Text1 and after Text2 , I should have :

<textarea name='Foo'>You Clicked Button One!You Clicked Button Two!</textarea>

and so on... I want to use this code to add a kind of BBcode on my mail system , so I don't want to erase all the message to add it ;)
 
Just change your script slightly:
Code:
<script language="javascript">
function addTextToFoo(text){
  document.FooForm.Foo.value[green]+[/green]=text;
}
</script>
 
this is all nice, but what happens if you don't want to add the text at the END of the textarea, but where the curser is postioned?

I still haven't found a solution to this that supports Firefox as well. Only IE supports creatRange :(

The following will work only in IE.
Code:
<script language="javascript">
function addTextToFoo(text){
	document.FooForm.Foo.focus();
	document.selection.createRange().text = text;
}
</script>

Can anyone think of a similar solution that will work with FF??

thanks!!!!
 
Found the solution after hours of trying and with the help of some webpage I lost [neutral] Here's a general thank you to all that helped me out there on the web and who's links I've lost. [thumbsup2]

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function AddText(tag) {
  var ta = document.forms[0].ta;

	// NS + FF
	if (window.getSelection) {
		start = ta.selectionStart;
		end = ta.selectionEnd;
	
		// Split before, sel, after and insert tags in between 
		before = (ta.value).substring(0, start);
		sel = (ta.value).substring(start, end);
		after = (ta.value).substring(end, ta.textLength);
	
		ta.value = before + tag + after;
	
		// focus
		ta.focus();
		ta.selectionStart = end + 5 + (tag.length * 2);
		ta.selectionEnd = ta.selectionStart; 
	}
	// IE
	else if (document.selection && document.selection.createRange) {
		ta.focus();
    document.selection.createRange().text = tag;		
	}
	// Not supported
	else {
		alert ("your browser does not support these functions");
	}
}
// -->
</script>
</head>

<body>
<script language="JavaScript" type="text/javascript">
<!--

//-->
</script>
<form name="test" action="" method="">
	<input type="button" onClick="AddText('hello')" value="button1" />
	<input type="button" onClick="AddText('munchie')" value="button2" />
	<br />
  <textarea name="ta" rows="10" cols="50"></textarea>
</form>
</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top