JS-onclick函数将文本字符符号插入到光标处的文本输入字段或文本区域

Posted 2021-02-25

// 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:
*
*/

// 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>
 
**/