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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Insert text on cursor in a textarea

Status
Not open for further replies.
lumberjakel

lumberjakel

Programmer
Oct 27, 2001
29
NL
Insert text on cursor in a textarea

This is what i want:
I have one textarea, an textfield (<input type=text>)
and a button (non-submit).
when the button is pushed, the text in the textfield must be inserted into the textarea. But not at the and, but at the cursor position. It wouldn't be difficult to place the text at the end:
function ins_text()
{
textarea1.value+=textfield1.value;
}


But I want it to be inserted on cursor position. So I have to find out the cursor position in my textarea, and that is where the problem is...

Please help me out...
 
Sort by date Sort by votes
check vituz post :

thread216-144664

text gets placed in where text is selected, so could easily be modified to suit Regards

Big Dave

davidbyng@hotmail.com


** If I am wrong I am sorry, but i'm only trying to help!! **

 
Upvote 0 Downvote
Thanx for this post, it already helps me, but it doesn't insert anything when nothing is selected...
That's to bad, because I want to do that too.
I tried to change the script, last lines became:

if (thetext.length){
//range.text=start+thetext+end
}
range.text=start+thetext+end;

so even when no text was selected there would be inserted something, but instead of inserting into the button's textvalue... ([\b]effect). It's clear to see why it happend.
So, what i tried to do was to find an event other than onclick, And I found onmouseover (), but unless the fact that it worked, I was unsatisfied.
I came up with something else, which works pretty well.
I gave an the focus to the textarea just before getSelection() (could also be just before createRange()). One question was wether it would reset the cursorposition in the textarea, or not. Another question was, would it work even if nothing is selected...

But I've tested it all and it works just fine.

So here is my final code.
Code: 
<html><head><title>regenerate your post :)</title>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
var IE=document.all || document.getElementById
var NC=document.layers

function Inserty()
{
	var prestart,preend,start,end,sel,range,thetext,dvsn,colname,theform,formname,colselname,colsel,effselname,effsel,effname,eff
	formname=&quot;myne&quot;
	colselname=&quot;colorName&quot;
	effselname=&quot;effectName&quot;
	theform=document.forms[formname]
	colsel=theform[colselname]
	effsel=theform[effselname]
	colname=colsel.options[colsel.selectedIndex].value
	effname=effsel.options[effsel.selectedIndex].text
	eff=effsel.options[effsel.selectedIndex].value
	
	dvsn=[&quot;[&quot;,&quot;]&quot;,&quot;[/&quot;]
	prestart=&quot;&quot;
	preend=&quot;&quot;
	
	if (colname!='none')
	{
		prestart=dvsn[0]+'color '+colname+dvsn[1]
		preend=dvsn[2]+'color'+dvsn[1]
	}
	
	start=(effname!='color')?prestart+dvsn[0]+eff+dvsn[1]:prestart
	end=(effname!='color')?dvsn[2]+eff+dvsn[1]+preend:preend
	
	myne.txtar.focus();
	sel=(IE)?document.selection:(NC)?document.getSelection():null
	range=sel.createRange()
	range.text=start+thetext+end;
}
//-->
</script>
</head>

<body>
<form name=myne>
  <p>
    <textarea name=&quot;txtar&quot;  cols=60 rows=14 wrap=virtual>
</textarea>
    <br>
    <input type=&quot;button&quot; name=&quot;b1&quot; value=&quot;effect&quot; onClick=&quot;Inserty()&quot;>
    <select name=&quot;effectName&quot;>
      <option value='b' selected>bold 
      <option value='i'>italics 
      <option value='u'>underline 
      <option value='s'>strike through 
      <option value='color'>color 
    </select>
    <select name=&quot;colorName&quot;>
      <option value='none' selected>None 
      <option value='green'>Green 
      <option value='red'>Red 
      <option value='grey'>Grey 
      <option value='blue'>Blue 
    </select>
  </p>
</form>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
376
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
709
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
653
ggriffit
ggriffit
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
348
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
276
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top