CodeSnip: Inserting Text at Cursor Location Using JavaScript
page 1 of 3
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): 43182/ 97
Article Contents:

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 Sub

JavaScript 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>

View Entire Article

User Comments

Title: jhjhjh   
Name: jhjh
Date: 11/27/2012 5:06:54 AM
Comment:
jjjhh
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 5/20/2012 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: 6/14/2010 7:17:25 AM
Comment:
Good Task
Title: Not working in FireFox   
Name: veer
Date: 5/14/2010 5:09:41 AM
Comment:
code is good but not working in FireFox
Title: Thanks   
Name: SYKIM
Date: 4/29/2010 8:40:09 PM
Comment:
YES, That is the Program, I have been finding
Title: Not working in FireFox   
Name: Wazir
Date: 12/15/2009 12:58:38 PM
Comment:
Oop! this is working fine in IE. but not in FireFox.
Title: Copy & paste   
Name: Mick H
Date: 9/25/2009 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: 7/20/2008 12:15:30 PM
Comment:
this code is too much confusing.
hard to understand
Title: Wow   
Name: ch.VenkateswaraRao
Date: 8/9/2007 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: 2/27/2007 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: 2/26/2007 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: 2/22/2007 9:10:29 AM
Comment:
window.event.returnValue = false;

What's with this line of code??
Title: almost there   
Name: Poloman
Date: 2/2/2007 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: 1/22/2007 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: 1/19/2007 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
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 9/3/2014 12:35:45 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search