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!

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

java script textarea HELP!!!

Status
Not open for further replies.
wheels979

wheels979

Programmer
Mar 28, 2007
3
US
I basically need a script to be able to place text into a textarea wherever the user wnats. So i'm using a seperate text box for a user to type into then when they click off it puts that text into a text area and appends bold tags around the text from the textbox.... basically so that they dont' have to type in HTML... the problem is if they select half way through the textarea and want to place text there it won't work it's placed at the end!!!

Any suggestions????/
 
Sort by date Sort by votes
Like this?
<textarea id=&quot;texta1&quot;>this is the default...</textarea>
<input type=&quot;text&quot; id=&quot;text1&quot; value=&quot;new default&quot;>
<input type=&quot;button&quot; id=&quot;text1&quot; onClick=&quot;texta1.value='<b>'+text1.value+'</b>';&quot; Value=&quot;Off&quot;>

Rick
if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot;) OR $answer==&quot;really good post&quot;){
print(&quot;Star&quot;);
}else{
print(&quot;Thanks.&quot;);
}
 
Upvote 0 Downvote
I'm missing something here. You have a text box, a text area and a button. The user type in the text box and clicks the button and the text goes to the textarea. Now you want them to be able to select a position in the text box where the new text is inserted with bold tags around it? Did I get this right?
Interesting...
1) Get the position of click in the textarea in character count
2) Pull the value of the text area into a variable
3) Split the value at the point they clicked (substring)
4) Concatenate front part, <b>, string from text box they entered, </b>, and then the last part of the text area value
5) Reassign the value of the textarea as the string created in the last step
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation
 
Upvote 0 Downvote

>>Get the position of click in the textarea in character count . . .

Yes Tarwn, you got it rigth. The problem is that you can't do it. It is possible to achieve this and other things like text formatting in IE only using textRange object (or something similar - I'm not good at IE-only extentions) and only on Windows.

We have just to live with this: browser form fields are not Word-like text editor.
 
Upvote 0 Downvote
Write a function:
(use courier or another block character font)
Get the placement of the click
Row = loc/character height
Col = loc/character width
Position = col * colsInBox + row
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation
 
Upvote 0 Downvote
I misread it (I'm good at that!). The problem is that you can't have two styles in the same textarea. You can't have half bold and half not bold. You could set the whole textarea to bold, but just a part of it won't work (cross browser).

Rick if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot;) OR $answer==&quot;really good post&quot;){
print(&quot;Star&quot;);
}else{
print(&quot;Thanks.&quot;);
}
 
Upvote 0 Downvote
I think he means the bold doesn't show up in the text area but the preview area. You type text, select a position to insert into, then the whole thing is moved to a preview area with the text inserted and bolded.
I have played with creating a function to select a position by mouse click, it's not consistent though. Another possibility is to make them use some sort of buttons to find the location they want to insert into:
I'll post it after i finish playing with it :)
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation
 
Upvote 0 Downvote
heh, heres one that works consistently with navigation buttons (not at all pretty):
Code: 
<!doctype html public &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html>
<head>
<title> New Document </title>
<script language=&quot;JavaScript&quot;>
<!--
var addLoc = 0;
var positioned=false;
function move(amt){
	if(positioned == false){
		addLoc = getLoc(amt);
		positioned = true;
		frmTest.bob.value = frmTest.bob.value.toString().substring(0,addLoc) + &quot;<>&quot; + frmTest.bob.value.toString().substring(addLoc);
	}
	else{
		frmTest.bob.value = frmTest.bob.value.toString().substring(0,addLoc) + frmTest.bob.value.toString().substring(addLoc+2);	
		
		addLoc = getLoc(amt);
		frmTest.bob.value = frmTest.bob.value.toString().substring(0,addLoc) + &quot;<>&quot; + frmTest.bob.value.toString().substring(addLoc);
	}
}

function getLoc(amt){
	if((addLoc + amt) < 0)
		return 0;
	else if((addLoc + amt) > frmTest.bob.value.toString().length)
		return frmTest.bob.value.toString().length;
	else
		return addLoc + amt;
}

function addText(){
	if(positioned == false){
		addLoc = getLoc(frmTest.bob.value.toString().length+10); //just to be sure
	}
	else{
		frmTest.bob.value = frmTest.bob.value.toString().substring(0,addLoc) + frmTest.bob.value.toString().substring(addLoc+2);
	}

	document.all.uncle.innerHTML = &quot;Preview Area:<br>&quot; + frmTest.bob.value.toString().substring(0,addLoc) + &quot;<b>&quot; + frmTest.txtUserEntry.value + &quot;</b>&quot; + frmTest.bob.value.toString().substring(addLoc);

	frmTest.bob.value = frmTest.bob.value.toString().substring(0,addLoc) + frmTest.txtUserEntry.value + frmTest.bob.value.toString().substring(addLoc);

	frmTest.txtUserEntry.value = &quot;&quot;;
}
//-->
</script>
</head>

<body>
<form name=&quot;frmTest&quot;>
<textarea name=bob rows=20 cols=100 wrap>Per lack of anything better to write here is a small passage of text to fill this space so that we can see the location pointer moving around as you click in differant locations. replacing the pointer with other text is a simple matter as you can see when I remove it if the poritioned variable is true.</textarea><br>
<input type=&quot;button&quot; value=&quot;Left 25 Col&quot; onClick=&quot;move(-25);&quot;><input type=&quot;button&quot; value=&quot;Left 1 Col&quot; onClick=&quot;move(-1);&quot;><input type=&quot;button&quot; value=&quot;Right 1 Col&quot; onClick=&quot;move(1);&quot;><input type=&quot;button&quot; value=&quot;Right 25 Col&quot; onClick=&quot;move(25);&quot;><br>
<input type=&quot;button&quot; value=&quot;Up A Row&quot; onClick=&quot;move(-100);&quot;><input type=&quot;button&quot; value=&quot;Down A Row&quot; onClick=&quot;move(100);&quot;><br>
<input type=&quot;text&quot; name=&quot;txtUserEntry&quot;><input type=&quot;button&quot; onClick=&quot;addText();&quot; value=&quot;Insert Text&quot;>
<br>

<span id=&quot;uncle&quot; style=&quot;width:600px;height:200px;font-size:12;border:1px solid #dddddd;&quot; wrap>Preview Area:</span>
</form>
</body>
</html>
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
576
Marclem
Marclem
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
2K
MDGarcia
MDGarcia
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
998
lexer
lexer
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
440
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top