 Print
 Add To Favorites
 Email To Friend
 Rate This Article
|
CodeSnip: Inserting Text at Cursor Location Using JavaScript
|
Published:
16 Jan 2007
|
Abstract
Often, developers come across situations in some application where they do not want to append the text at the end of current text (which is common). Instead, they want to insert it at cursor location of an editable control like a TextBox or a third party control. This snippet will be very handy in such scenario and Pallavi demonstrates it using ASP.NET 2.0 and JavaScript. |
 |
by Pallavi Mahure
Feedback
|
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days):
26187/
91
|
|
|
|
| Introduction |
It is always nice if we can insert some text at the cursor
location in Textbox from some other Textbox. Consider the scenario, suppose you
have TextBox1 and TextBox2. Now you want to paste some text from Textbox2 to
TextBox1 through program. So, either the text in TextBox1 will be overwritten
or the new text will be appended at the end of text. If you want text to be
inserted at cursor location of TextBox1, then the following code will help you.
JavaScript function is used to accomplish it. It is called an onClick event
of button. JavaScript function Show () is registered with ASP.NET command
button on page load.
ASPX Code
Listing 1
Private Sub Page_Load(ByVal sender As _
System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
CmdButton.Attributes.Add("onClick", _
"Show()")
End SubJavaScript Code
Listing 2
<a name="_HTML_SECTION"></a><script language = "java-script">
function Show()
{
var ctrl =
document.getElementById("txtTargetText");
var saveText = ctrl.value;
ctrl.focus();
var range = document.selection.createRange();
var specialchar = String.fromCharCode(1);
range.text = specialchar;
var pos = ctrl.value.indexOf(specialchar);
ctrl.value = saveText;
range = ctrl.createTextRange();
range.move('character', pos);
range.select();
range.text =
document.getElementById("txtSourceText").value;
document.getElementById("txtTargetText").focus();
window.event.returnValue = false;
}
</ script>HTML Section
Listing 3
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox id="txtTargetText" style="Z-INDEX: 101; LEFT:
136px; POSITION: absolute; TOP: 40px" runat="server"
Width="489px"></asp:TextBox>
<asp:Button id="cmdButton" style="Z-INDEX: 102; LEFT: 320px;
POSITION: absolute; TOP: 144px" runat="server"
Text="Button"></asp:Button>
<asp:TextBox id="txtSourceText" style="Z-INDEX: 103; LEFT:
280px; POSITION: absolute; TOP: 88px" runat="server"
Width="168px" Height="32px"></asp:TextBox>
</div>
</form>
</body> |
|
|
|
User Comments
Title:
jhjhjh
Name:
jhjh
Date:
2012-11-27 5:06:54 AM
Comment:
jjjhh
|
Title:
2012 NFL jerseys
Name:
NIKE NFL jerseys
Date:
2012-05-20 11:29:57 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
|
Title:
Good Task
Name:
HASIB Team
Date:
2010-06-14 7:17:25 AM
Comment:
Good Task
|
Title:
Not working in FireFox
Name:
veer
Date:
2010-05-14 5:09:41 AM
Comment:
code is good but not working in FireFox
|
Title:
Thanks
Name:
SYKIM
Date:
2010-04-29 8:40:09 PM
Comment:
YES, That is the Program, I have been finding
|
Title:
Not working in FireFox
Name:
Wazir
Date:
2009-12-15 12:58:38 PM
Comment:
Oop! this is working fine in IE. but not in FireFox.
|
Title:
Copy & paste
Name:
Mick H
Date:
2009-09-25 3:43:20 PM
Comment:
Thanks loads, as a newbie stuff likes this really helps. This was a copy and paste and change the object names for me and it replaced a load of my dodgy code. Thanks again.
|
Title:
Just Satisfactory
Name:
Bushra Jii
Date:
2008-07-20 12:15:30 PM
Comment:
this code is too much confusing.
hard to understand
|
Title:
Wow
Name:
ch.VenkateswaraRao
Date:
2007-08-09 1:12:31 AM
Comment:
This is an excellent piece of code. Pallavi u did an extra ordinary Job with JavaScript. Thank U very Much for code snippet.
Regards
Venki
|
Title:
window.event.returnValue = false;
Name:
Pallavi
Date:
2007-02-27 1:06:06 AM
Comment:
In normal case in ASP.NET the server side events are fired after java script execution .If you do not want to fire server side events after the execution of java script, you need to end the java script function with
window.event.returnValue =false.
We normally use this in case of validation using java script.
|
Title:
Good Job.
Name:
Sumit Kumar Dhal
Date:
2007-02-26 2:21:27 AM
Comment:
Good job pallavi.
I am a .net windows programmer, and do not know much about power of java script. This will encourge me to do some web work.
|
Title:
good job 10x, one question
Name:
kabba
Date:
2007-02-22 9:10:29 AM
Comment:
window.event.returnValue = false;
What's with this line of code??
|
Title:
almost there
Name:
Poloman
Date:
2007-02-02 11:22:34 AM
Comment:
This looks perfect for what I'm after - but it doesnt quite work if i have line breaks in my text box - I think the special char is getting mixed with the line breaks and so its inserting an offset of the number of lines down that the cursor is positioned - any suggestions?
|
Title:
Larisa loves pictures
Name:
love@sunset.so
Date:
2007-01-22 10:37:53 AM
Comment:
Great code sniplett.
I like this user friendly aproach, because I believe it will help my website visitors to be more happy about my site.
Thank you for sharing this tutorial with me !
|
Title:
Good Job.
Name:
Sumit Kumar Dhal
Date:
2007-01-19 12:35:26 PM
Comment:
Good job pallavi.
I am a .net windows programmer, and do not know much about power of java script. This will encourge me to do some web work.
-sumit
|
|
Product Spotlight
|
|
|
