How to Insert a Character at the Cursor in JavaScript

Written by cathlene s. baptista
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Insert a Character at the Cursor in JavaScript
JavaScript can be used to insert characters at the cursor in text fields. (Hemera Technologies/AbleStock.com/Getty Images)

JavaScript is a client-side scripting language that can be used by Web developers to perform a variety of dynamic user interface tasks. User interface manipulations can range from simple responses (such as alert boxes) to complex interactions. For example, many Web pages have text or input fields in which users type information. Using JavaScript, Web developers can manipulate this text at the cursor, coding buttons that insert character strings (such as an e-mail address), highlight text or copy text to use elsewhere in the program.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Text editor
  • Web browser with JavaScript enabled

Show MoreHide

Instructions

  1. 1

    Open a text editor and create a new file named cursorInsert.html. Add some HTML tags to the file that comprise a basic Web page. These tags include <html>, <head>,</head>, <body>, </body> and </html>.

    <html>

    <head></head>

    <body></body>

    </html>

  2. 2

    Add an open <script> tag and a close </script> tag to the <head> section of cursorInsert.html. Assign the <script> tag the type attribute text/JavaScript. This attribute indicates that any text placed between the opening and closing <script> tags is JavaScript code.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body></body>

    </html>

  3. 3

    Create a function named insertAtCursor between the open and close <script> tags. The insertAtCursor function takes two variable value arguments: text Area and text. The text Area variable tells the insertAtCursor function the identity of the text field that will be manipulated, and the text variable is the character that will be placed at the cursor inside text Area. Use an open curly brace ({) and a close curly brace (}) to hold the place for the function's code.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    }

    </script>

    </head>

    <body></body>

    </html>

  4. 4

    Add an if...else if conditional statement between the insertAtCursor function's open and close curly braces. The condition that the code matches is the valid use of the setSelectionRange method referring to the text Area field. Add an open and a close curly brace after the if...else if statement to indicate the code to execute if the condition is true.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    if (textArea.setSelectionRange){ }

    }

    </script>

    </head>

    <body></body>

    </html>

  5. 5

    Add code between the conditional statement's open and close curly braces that inserts the text stored in the text variable at the cursor placed in text Area. Use a JavaScript substring() command to create the string to use to update the text. This string uses the first part of the string (up to the cursor), appends the value stored in the text variable, appends any values between the start and end cursor locations and appends any values stored after the cursor.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    if (textArea.setSelectionRange){

    textArea.value = textArea.value.substring(0,textArea.selectionStart) + text + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

    }

    }

    </script>

    </head>

    <body></body>

    </html>

  6. 6

    Add the else if conditional code after the if...else if conditional statement's close curly brace. The condition that the code matches is the existence of the document.selection and document.selection.createRange objects. Add an open and a close curly brace after the else if statement to indicate where the conditional code should be placed. This code provides support for any browsers that do not understand the setSelectionRange method.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    if (textArea.setSelectionRange){

    textArea.value = textArea.value.substring(0,textArea.selectionStart) + text + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

    } else if (document.selection && document.selection.createRange) {

    }

    }

    </script>

    </head>

    <body></body>

    </html>

  7. 7

    Add code between the else if conditional statement's open and close curly braces. The code sets focus to the text Area text field, uses the document.selection.createRange() object to retrieve the text in the text Area field and sets the text field to the text value appended to the range.text value.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    if (textArea.setSelectionRange){

    textArea.value = textArea.value.substring(0,textArea.selectionStart) + text + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

    } else if (document.selection && document.selection.createRange) {

    textArea.focus();

    var range = document.selection.createRange();

    range.text = text + range.text;

    }

    }

    </script>

    </head>

    <body></body>

    </html>

  8. 8

    Add an HTML <form> tag between the open and close <body> tags. In addition, add an <input> tag with the following attributes: type = "button", value = "Click Here" and an on Click() event insertAtCursor(this.form.textArea,'hello'). Add a <textarea> tag with the following attributes: rows = "7", cols = "30" and name = "textArea". Close the <textarea> tag and the <form> tag.

    <html>

    <head>

    <script type="text/javascript">

    function insertAtCursor(text Area,text) {

    if (textArea.setSelectionRange){

    textArea.value = textArea.value.substring(0,textArea.selectionStart) + text + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

    } else if (document.selection && document.selection.createRange) {

    textArea.focus();

    var range = document.selection.createRange();

    range.text = text + range.text;

    }

    }

    </script>

    </head>

    <body>

    <form>

    <input type="button" value="Click Here" onclick="insertAtCursor(this.form.textArea,'hello')">

    <textarea rows="7" cols="30" name="textArea"></textarea>

    </form>

    </body>

    </html>

  9. 9

    Open cursorInsert.html in a Web browser. Click the "Click Here" button to insert the text "hello" at the cursor location. Add some text to the input field and verify that clicking the "Click Here" button inserts the text at the cursor.

Tips and warnings

  • Inserting text at the cursor is useful when adding international characters, such as accents, in specific locations in text strings.
  • The JavaScript substring() method can be used to extract specific characters from strings.
  • The selection object can be used to highlight specific parts of text for use elsewhere in the user interface.
  • The terms "caret" and "caret navigation" are sometimes used to refer to a "cursor" or "cursor insertion point."
  • Some browsers do not provide support for the document.selection object as well as the setSelectionRange method. In these cases, consider messaging the user with instructions for doing a manual text insert.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.