Insert value at the position of the cursor 1

girlinterrupted24 · Feb 13, 2006

Hey there,

I just wondered if someone could help me adapt my code a little... basically it adds html style to form box content, but at the moment regardless of where the mouse cursor is within the form box when you click to add the style, it always places it at the end of the content... does anyone know how to get it to insert it at the cursor point at the time of clicking?

function addtag(tag) {
box_content = document.updateContent.content.value + tag
document.updateContent.content.value = box_content
document.updateContent.content.focus()
}

Many many thanks for any help

theniteowl · Feb 13, 2006

If your goal is to style text inside of a textarea or input box this will not work. Style properties only apply to the field itself and markup within the field will have no effect.
As an alternative, here is a link on how to create a WYSIWYG text editor in javascript.

http://www.webreference.com/programming/javascript/gr/column11/2.html

If you still need to be able to determine where the cursor position is within a field and insert text there, here is a sample application I found at:

http://experts.about.com/q/Javascript-1520/Inserting-text-text-area.htm

Code:

<html>
<head>
<title>Javascript: Inserting text in the text area cursor position</title>
<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 text
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 encountered
  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.length);
  myForm.myTextArea.value = firstPart + stringToInsert + secondPart;
}
</SCRIPT>
</head>

<BODY>
<form NAME="myForm">
 <input TYPE="button" VALUE="BlahBlah" ONCLICK="insertString(this.value)">
 <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()">Pre-existing text</textarea>
</form>
</body>
</html>

Stamp out, eliminate and abolish redundancy!

simonchristieis · Feb 13, 2006

HAve a look for :

document.selection.createRange().text

DasUK · Mar 2, 2006

Try This

JS CODE:
function insertAtCursor(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue + myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
document.frm.variables.selectedIndex = 0;
}

CODE TO INSERT
onchange="insertAtCursor(document.frm.fieldname, this.value)"

CAN BE USED ON Form Variables

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!

Insert value at the position of the cursor 1

girlinterrupted24

Programmer

theniteowl

Programmer

simonchristieis

Programmer

DasUK

Programmer

Similar threads

Part and Inventory Search

Sponsor