faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

134 of 315 people (43%) answered Yes
Recently 8 of 10 people (80%) answered Yes


Can a word be inserted into a textarea at the cursor position when a button clicked. Could creating keypress events for each character work if so how?

Apr 4th, 2008 19:41
ha mo, Randy Taylor, Iván Rivera, austin collins,

Here is a quick little HTML page with detailed comments that does 
exactly what you want (only been tested in IE - not sure if it works in 
Netscape or not).
Enjoy - Randy L. Taylor
 When one of the buttons is clicked, that button passes it's own value 
to the insertString() function.
 That function will then insert that string into the textarea where the 
cursor is.
 The textarea is setup to call setCursorPos() whenever it changes.
 The purpose of setCursorPos() is to keep track of the cursor position
 in a global variable since when a button is clicked to insert text
 into the textarea the cursor is actually gone from the textarea at 
that point.
 So, we save off the cursor position and actually use that saved off 
 rather than the actual cursor position (which is on the button).
<form NAME="myForm">
 <input TYPE="button" VALUE="BlahBlah" ONCLICK="insertString
 <input TYPE="button" VALUE="YeaYea" ONCLICK="insertString(this.value)">
 <input TYPE="button" VALUE="YupYup" ONCLICK="insertString(this.value)">
 <textarea NAME="myTextArea" ROWS="5" COLS="100" ONCHANGE="setCursorPos
()" ONCLICK="setCursorPos()"></textarea>
<script LANGUAGE="Javascript">
var globalCursorPos; // global variabe to keep track of where the 
cursor was
//sets the global variable to keep track of the cursor position
function setCursorPos() {
  globalCursorPos = getCursorPos(myForm.myTextArea);
//This function returns the index of the cursor location in
//the value of the input text element
//It is important to make sure that the sWeirdString variable contains
//a set of characters that will not be encountered normally in your
function getCursorPos(textElement) {
  //save off the current value to restore it later,
  var sOldText = textElement.value;
//create a range object and save off it's text
  var objRange = document.selection.createRange();
  var sOldRange = objRange.text;
//set this string to a small string that will not normally be 
  var sWeirdString = '#%~';
//insert the weirdstring where the cursor is at
  objRange.text = sOldRange + sWeirdString; objRange.moveStart
('character', (0 - sOldRange.length - sWeirdString.length));
//save off the new string with the weirdstring in it
  var sNewText = textElement.value;
//set the actual text value back to how it was
  objRange.text = sOldRange;
//look through the new string we saved off and find the location of
//the weirdstring that was inserted and return that value
  for (i=0; i <= sNewText.length; i++) {
    var sTemp = sNewText.substring(i, i + sWeirdString.length);
    if (sTemp == sWeirdString) {
      var cursorPos = (i - sOldRange.length);
      return cursorPos;
//this function inserts the input string into the textarea
//where the cursor was at
function insertString(stringToInsert) {
  var firstPart = myForm.myTextArea.value.substring(0, globalCursorPos);
  var secondPart = myForm.myTextArea.value.substring(globalCursorPos,
  myForm.myTextArea.value = firstPart + stringToInsert + secondPart;