cursorInsert.js

// Original JavaScript code improved and cleaned up:

/*
 * USAGE: Give your HTML textarea or text input element an ID.
 * Give your button an onClick="insertThisInThere(text2insert, theInputIDwhereItGoes);".
 *
 * EX:  <input type="text" id="myInput" />
 *      <input type="submit" value="Insert ® symbol" onClick="insertThisInThere('®', 'myInput');" />
 *
 */

function insertThisInThere(thisChar, thereId) {
    function theCursorPosition(ofThisInput) {
        // Set a fallback cursor location
        var theCursorLocation = 0;

        // Find the cursor location via the IE method...
        if (document.selection) {
            ofThisInput.focus();
            var theSelectionRange = document.selection.createRange();
            theSelectionRange.moveStart('character', -ofThisInput.value.length);
            theCursorLocation = theSelectionRange.text.length;
        } else if (ofThisInput.selectionStart || ofThisInput.selectionStart === 0) {
            // ...or the Firefox way
            theCursorLocation = ofThisInput.selectionStart;
        }
        return theCursorLocation;
    }

    // Now get ready to place our new character(s)...
    var theIdElement = document.getElementById(thereId);
    var currentPos = theCursorPosition(theIdElement);
    var origValue = theIdElement.value;
    var newValue = origValue.substr(0, currentPos) + thisChar + origValue.substr(currentPos);

    theIdElement.value = newValue;
}

/**  EXAMPLE HTML:

<h2>Set your cursor anywhere inside the text field, then click the button to insert text at the cursor location. Each button has an onClick="sendChar2Id('®','toThisId');"</h2>

<br/><hr /><br/>

<input type="text" id="inputOne" value="inputOne" /><br />
<input type="submit" onClick="insertThisInThere('*A*','inputOne')" value="Insert *A* into inputOne" />

<br/><hr /><br/>

<textarea id="inputTwo">inputTwo</textarea><br />
<button onClick="insertThisInThere('*B*','inputTwo');">Insert *B* into inputOne</button>

**/

// Explanation:

// The `insertThisInThere` function is designed to insert a given character into a text input or textarea element at the current cursor position.
// It takes two parameters: `thisChar` (the character to be inserted) and `thereId` (the ID of the input element where the character should be inserted).

// Inside the function, the `theCursorPosition` function is defined, which determines the current cursor position within the input element.
// It checks if the browser supports the Internet Explorer method (`document.selection`) or the Firefox method (`ofThisInput.selectionStart`) to retrieve the cursor position.
// It returns the cursor position as an integer.

// The main part of the function starts by retrieving the input element using the provided ID (`thereId`).
// It then calls the `theCursorPosition` function to get the current cursor position within the input element.

// The original value of the input element is stored in the `origValue` variable.
// The `newValue` variable is then created by concatenating the original value up to the current cursor position (`origValue.substr(0, currentPos)`),
// the character to be inserted (`thisChar`), and the remaining part of the original value (`origValue.substr(currentPos)`).

// Finally, the `newValue` is assigned back to the input element's value, effectively inserting the character at the current cursor position.

// The provided example HTML demonstrates the usage of the `insertThisInThere` function by showing two input elements: one text input and one textarea.
// Each has a button that triggers the function with different characters to be inserted at the current cursor position.