Posted By

brandonjp on 02/02/11

Tagged

Versions (?)

Last Edited at 02/02/11 08:39am

Statistics

Viewed 3716 times

Favorited by 0 user(s)

Related snippets

JS - onclick function to insert text characters symbol into text input field or textarea at the cursor caret location position

/ Published in: JavaScript

// big thanks to these tips for giving me code to steal: http://bit.ly/bundles/brandonjp/9

/*
* USAGE: give your HTML textarea or text input element an ID
* give your button an onClick="insertThisInThere(text2insert, theInputIDwhereItGoes);"
*
* EX:
*
*/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// big thanks to these tips for giving me code to steal:  http://bit.ly/bundles/brandonjp/9
 
/*
 * 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');" />
 *
 */
 
 
// my bp-ized version so people won't know I stole it all, but really just so I can understand it better
 
function insertThisInThere(thisChar, thereId) {
	function theCursorPosition(ofThisInput) {
		// set a fallback cursor location
		var theCursorLocation = 0;
 
		// find the cursor location via 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 FF 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>
 
**/