Entry
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
<HTML>
<HEAD>
<!--
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
value
rather than the actual cursor position (which is on the button).
-->
</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)">
<br>
<textarea NAME="myTextArea" ROWS="5" COLS="100" ONCHANGE="setCursorPos
()" ONCLICK="setCursorPos()"></textarea>
</form>
</body>
</html>
<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>
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
