Highlighting Text Areas and JavaScript Syntax

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Highlighting Text Areas and JavaScript Syntax
Web page JavaScript functions highlight text entered by users. (Hemera Technologies/AbleStock.com/Getty Images)

Using JavaScript functions, Web developers highlight input text within a Web page text element. HTML elements such as text-fields and text-areas contain either default text indicated within page markup code or text entered by the user. JavaScript functions highlight the text displayed in an input element using the select and focus methods, both of which only require a single line of code.

HTML Element

Web page functions in JavaScript highlight the text that appears within an input element. The input element may be either a text-field or a text-area. The following example HTML markup code creates a text-area element within a Web page:

<textarea rows="5" cols="15" id="mytext">

Here is the default text-area text.


This excerpt would function within an HTML form designed to capture user input. The JavaScript function can use the ID attribute to identify the text-area element within the HTML DOM (Document Object Model).

Element Reference

JavaScript functions appear within Web page head sections or alternatively within separate script files linked to from the page. The following example function outline acquires a reference to the text-area in the page:

function highlight Text(textArea){

var tArea = document.getElementById(textArea);

//highlighting code here


This function uses a data item which it receives when called, indicating the ID of the text-area element in the page. Using this ID value, the code gets a reference to the text input element, storing it in a variable.


The focus method in JavaScript gives an input element interaction focus. An element has focus if it is ready for the user to interact with it without having to click or select it first. Users interacting with HTML forms can select which input element they wish to complete next by clicking or tabbing through form elements. However, JavaScript functions can also perform this task, as in the following example code:



The select method in JavaScript selects the content of a text element within the page, highlighting it as it appears within the user's browser. The following example syntax demonstrates highlighting the text within the given text-area element after giving it focus:


Once this line executes, the text will appear highlighted to the user filling in the form within the page currently displayed in their browser.

Function Call

HTML pages can call text highlighting functions on user events such as clicking within the page. The following extended HTML text-area markup demonstrates calling the highlighting function when the user clicks the text-area with their mouse:

<textarea rows="5" cols="15" id="mytext" onclick="highlight Text(this.id)">

Here is the default text-area text.


When the element specifies the function call to execute on clicking, it also passes the ID attribute, so that the function can use it to identify the element in the page.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • 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.