[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1718
  • Last Modified:

Change Textfield border on click using Javascript

Im trying to change the text field border on clicking the field, only the script below doesnt work.
function highlight() {
 
	if (document.getElementById("fname").style.border=='1px solid #999999') {
	document.getElementById("fname").style.border='1px solid #BDB737';
	}
	else {
	document.getElementById("fname").style.border='1px solid #999999';
	}
 
}
 
 
<input name="textfield" type="text" id="fname" style="border:1px solid #999999; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" />

Open in new window

0
agulaid
Asked:
agulaid
  • 2
1 Solution
 
RobinSoftware EngineerCommented:
Try it like this:

function highlight()
{
  if (document.getElementById("fname").style.border=='#999999 1px solid') {
        document.getElementById("fname").style.border='#BDB737 1px solid';
      }
      else {
        document.getElementById("fname").style.border='#999999 1px solid';
      }
}
 
<input name="textfield" type="text" id="fname" style="border:#99999 1px solid; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" />
0
 
agulaidAuthor Commented:
robinu

thanks, that works... How would i get it to remove the border upon clicking away? at the moment it highlights the field on click.
0
 
RobinSoftware EngineerCommented:
You could use the onblur event:

function unhighlight()
{  
  document.getElementById("fname").style.border='#999999 1px solid';
}

and

<input name="textfield" type="text" id="fname" style="border:#99999 1px solid; background-color: #FFFFFF; height:20px; font-size:14px ; padding:2px; color: #333333;" size="35" onclick="highlight();" onblur="unhighlight();">
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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