• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 155
  • Last Modified:

Javascript: Help needed to modify a script -- trying to insert a "special character" into a text field at the point where cursor

Hello experts.  I have a text area which a user can modify.  I need them to be able to insert a symbol into the text area (which they can).  However the symbol is always inserted at the end of the text (see code snippet below).  I need the symbol to be inserted at the point where the cursor is when the user inserts (so in the snippet below, i want a TM symbol inserted where the ">>>" are and not after the word "always" at the end.

Is this possible?

Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experts Sample</title>
<script type="text/javascript">
function addText_myText(text){
  document.getElementById('myText').value += text;
<form action="" method="post" name="Bioform" id="Bioform">
<a href="#" onClick="addText_myText('&#174;');updatetext('myText','repmyText_tab1','htext');" myText="Insert &#174; symbol">&#174;</a> <a href="#" onClick="addText_myText('&#8482;');updatetext('myText','repmyText_tab1','htext');" myText="Insert &#8482; symbol">&#8482;</a><br>
<textarea cols="30" rows="10" name="myText" id="myText" onKeyDown="updatetext('myText');" onKeyUp="updatetext('myText');">This is a long paragraph.  I'd like to insert a trademark symbol here >>>.  However it will always insert at the end of this text.  Can this script be modified to insert symbol where cursor is placed?  Thank you as always.</textarea>

Open in new window

1 Solution
Try the below i made for another question on here:

This will insert the TM or what ever symbol you pass in where the cursor is. You can also highligh text and it will append the symbol to the end of it.
<script type="text/javascript">
        function setColor(a) {
                var seltxt=''
                var textbox = document.getElementById('inputforum');                    
                if (document.selection) { // for IE                     
                        var sel = document.selection.createRange();
                        sel.text = sel.text + a;
                } else if (typeof textbox.selectionStart != 'undefined') { // for FF, Opera etc...
                        var len = textbox.value.length;
                        var start = textbox.selectionStart;
                        var end = textbox.selectionEnd;
                        var sel = textbox.value.substring(start, end);
                        var replace = sel + a;
                        textbox.value = textbox.value.substring(0,start) + replace + textbox.value.substring(end,len);
<textarea id="inputforum"></textarea>
<input type="button" onclick="setColor('&#174;')" value="Insert TM" />

Open in new window

whaleykAuthor Commented:
That's beatufiul :-)  Thank you very much.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now