Highlight Form Fields - JavaScript Code

This script highlights the background of the text box when selected. You can choose any color you like.

This is a simple feedback form, you can use on your website. Just copy and paste the following script into your HTML document head and body tags.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script type="text/javascript">
var highlightcolor="#FFFFD8"

var ns6 = document.getElementById && !document.all
var previous=''
var eventobj

//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/

//Function to check whether element clicked is form element
function checkel(which)
{
    if ( which.style && intended.test(which.tagName) ) {
        if (ns6 && eventobj.nodeType == 3)
            eventobj = eventobj.parentNode.parentNode
        return true
    }
    else
        return false
}

//Function to highlight form element
function highlight(e)
{
    eventobj = ns6 ? e.target : event.srcElement

    if (previous != '')
    {
        if (checkel(previous))
            previous.style.backgroundColor=''

        previous = eventobj

        if (checkel(eventobj))
            eventobj.style.backgroundColor=highlightcolor
    }
    else {
        if (checkel(eventobj))
            eventobj.style.backgroundColor=highlightcolor
        previous = eventobj
    }
}

</script>

Insert this code into <body> tags

<form action="#" onclick="highlight(event)">
<table border="0" cellspacing="2" cellpadding="2" align="center">
    <tr>
      <td width="15%">Text 1: </td>
      <td>
        <input type="text" size="40" maxlength="40">
      </td>
    </tr>
    <tr>
      <td class="maintext">Text 2: </td>
      <td>
        <input type="text" size="40" maxlength="40">
      </td>
    </tr>

    <tr>
      <td align="left" valign="top">Text 3:</td>
      <td>
        <textarea cols="40" rows="7"></textarea>
      </td>
    </tr>
    <tr>
      <td>List:</td>
      <td>
        <select name="select" size="1">
          <option>Example List Item 1</option>
          <option>Example List Item 2</option>
          <option>Example List Item 3</option>
          <option>Example List Item 4</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" name="Submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

Instruction:

Modify the table style to suit your site.
Alter the color with this line code: var highlightcolor="#FFFFD8"

Webmaster » Web Programming » JavaScript » Forms » Highlight Form Field

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links