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): 19339/ 176
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

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 4 and 3 and type the answer here:

User Comments

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 
Learn More
.NET Tools
asp.net shopping cart
asp.net chart control






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


©Copyright 1998-2009 ASPAlliance.com  |  Page Processed at 1/7/2009 3:04:57 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search