Change <input type="text"> background

otuatail · February 4, 2010

Hi I posted this in CSS but I have been told that it is a javascript problem.

------------------------------------

Hi is there a way to modify my style shhet so that when a user clicks his mouse into a

<input type = text> and <text area> the bacground and font change

http://www.yorkbaptist.org.uk/holclub/contactus.php

Side issue.

Just upgraded to Windows 7 64 bit. My free PHP Designer 2005 dosn't work so a sugestion of a better one apreciated.

otuatail · February 4, 2010

I have noticed that this forum has something similar. The texbox at the top changes when you move the mouse over it. It has a class""input_text"

Desmond.

KevinM1 · February 4, 2010

So, you want something like:

<!DOCTYPE html>
<html>
   <head></head>

   <body>
      <form name="form1" action="#" method="post">
         <input type="text" />
         <br />
         <textarea></textarea>
         <br />
         <input name="submit" type="submit" value="Submit" />
      </form>
   </body>

   <script type="text/javascript">
      var inputs = document.getElementsByTagName('input');
      var textareas = document.getElementsByTagName('textarea');

      var textInputs = new Array();

      for(var i = 0; i < inputs.length; ++i) {
         if (inputs[i].type == "text") {
            textInputs.push(inputs[i]);
         }
      }

      for(var j = 0; j < textInputs.length; ++j) {
		textInputs[j].onclick = function() {
			this.style.backgroundColor = "red";
		}
	}

      for(var k = 0; k < textareas.length; ++k) {
		textareas[k].onclick = function() {
			this.style.backgroundColor = "blue";
		}
	}
   </script>

</html>

??

Or are you looking to change the background of other elements?

otuatail · February 4, 2010

This is very confusing. I have tried this but it dosn't work. Here is all the code for the page.

------------------

<?
// YBC Version 2.0.0   09-04-2007   Desmond O'Toole.
include ("includes/HCfunctions.php");
$page = "ContactUs";
session_start();
Session_Init();
connectDB(1);
$v = $rand = mt_rand(1,96);
$sql = "SELECT question FROM capture WHERE ID = " . $v;
$query = mysql_query($sql);
$row = mysql_fetch_array($query);
$img = "security/" . $row["question"];
$_SESSION["me"] = $row["question"];

$_SESSION['return_page'] = $_SESSION['current_page'];
$_SESSION['current_page'] = $page;
mailto($page);

$filename = filename($_SERVER['PHP_SELF']);
$Update = date("D d-M-Y", filectime($filename));

?>

<script type="text/javascript">
var inputs = document.getElementsByTagName('input');
var textareas = document.getElementsByTagName('textarea');
var textInputs = new Array();
for(var i = 0; i < inputs.length; ++i)
{
  if (inputs[i].type == "text")
  {
    textInputs.push(inputs[i]);
  }
}

for(var j = 0; j < textInputs.length; ++j)
{
  textInputs[j].onclick =
  function()
  {
    this.style.backgroundColor = "red";
  }
}
for(var k = 0; k < textareas.length; ++k)
{
  textareas[k].onclick =
  function()
{
  this.style.backgroundColor = "blue";
}
}

</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Holiday Club Contact</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stylesheets/ybc_holclub.css" type="text/css">
</head>
<body>
<form action="email.php" method="POST">


<div id="PageTitle">
<img src="images/Banner.jpg" alt="Holiday club">
</div>

<?
include('side.php');
?>

<div id="PageContent">
<table>
<tr><td> Name:</td></tr>
<tr><td><input type="text" name="Name" size="35" maxlength="35"  value="<?=$_SESSION["Name"]?>"> 
<span style="color:#F4764E"><?echo $_SESSION["Error_1"]?></span><br></td></tr>
<tr><td> Email:<br>
<tr><td><input type="text" name="Email" size="35" maxlength="35"  value="<?=$_SESSION["Email"]?>"> 
<span style="color:#F4764E"><?echo $_SESSION["Error_2"]?></span><br></td></tr>
<tr><td> Subject:<br>
<tr><td><input type="text" name="subject" size="35" maxlength="35"  value="<?=$_SESSION["Subject"]?>"> 
<span style="color:#F4764E"><?echo $_SESSION["Error_3"]?></span><br></td></tr>
<tr><td> Message:<br>
<tr><td><textarea rows="6" name="message" cols="40">
<?=$_SESSION["Msg"]?>
</textarea> 
<span style="color:#F4764E"><?echo $_SESSION["Error_4"]?></span><br></td></tr>

<tr><td height="100px">
<br><br>
<div style="width:201px;height:50px;border:solid;color:#F4764E">
<img src="<?=$img?>" alt=""><br>
</div>
</td></tr>
<tr><td>
Enter the text in the image above.</td></tr>
<tr><td><input type="text" name="Response"> <span style="color:#F4764E"><?echo $_SESSION["Error_5"]?>
</td></tr>

<tr><td><br><br><input type="submit" name="Send" value="Send" alt="Send" name=submit1>
   
<input type="submit" name="Cancel" value="Cancel" alt="Cancel" name=submit1>

</td></tr>
</table>
</div>

<DIV id=webmasterlink><A href="mailto:webmaster@yorkbaptist.org.uk">webmaster@yorkbaptist.org.uk</A> </DIV>
<DIV id=lastupdated>York Baptist Church, last updated <?=$Update?></DIV>
</form>
</body>
</html>

KevinM1 · February 4, 2010

It doesn't work, in part, because you put the script in the wrong place. I intentionally placed the JavaScript at the end of the HTML. This ensures that it won't create any runtime errors. Putting it at the very beginning of the markup, in the way that I wrote it, will practically ensure it won't run as the script will run before the page elements are created. Thus, it will look to add onclick events to non-existing elements.

Put the JavaScript at the end, after the closing </body> tag, but before the closing </html> tag, and tell me what you get.

otuatail · February 4, 2010

Ok Thanks. This is making a difrence. Problem is they stay red/Blue. What I wanted was. I click into the Name: text box and it changes to red. I type something in. Then I click on the Email: it changes to red but thr Name: goes back to white. A kind of mouse in mouse out kind of thing.

Desmond.

KevinM1 · February 4, 2010

Ok Thanks. This is making a difrence. Problem is they stay red/Blue. What I wanted was. I click into the Name: text box and it changes to red. I type something in. Then I click on the Email: it changes to red but thr Name: goes back to white. A kind of mouse in mouse out kind of thing.

Desmond.

Ah, you want a toggle. Easy modification:

<script type="text/javascript">
      var inputs = document.getElementsByTagName('input');
      var textareas = document.getElementsByTagName('textarea');

      var textInputs = new Array();

      for(var i = 0; i < inputs.length; ++i) {
         if (inputs[i].type == "text") {
            textInputs.push(inputs[i]);
         }
      }

      for(var j = 0; j < textInputs.length; ++j) {
         textInputs[j].onclick = function() {
            this.style.backgroundColor = (this.style.backgroundColor == "red") ? "white" : "red";
         }
      }

      for(var k = 0; k < textareas.length; ++k) {
         textareas[k].onclick = function() {
            this.style.backgroundColor = (this.style.backgroundColor == "blue") ? "white" : "blue";
         }
      }
   </script>

Replace the script you currently have with what I wrote above. Here's what the change does:

It checks to see what the current color of the background is. If it's a 'special' color (red or blue), it sets it to white. Otherwise, it sets it to the special color. Also note that you can use any background color you want. I chose red and blue merely as example colors. Feel free to use whatever fits with your site. The code will accept color codes (like #CC00FF), too. Just be sure they're encased in quotes.

otuatail · February 4, 2010

No this code does not change it back to what it was (White)

Desmond

<script type="text/javascript">      var inputs = document.getElementsByTagName('input');      var textareas = document.getElementsByTagName('textarea');      var textInputs = new Array();      for(var i = 0; i < inputs.length; ++i) {         if (inputs[i].type == "text") {            textInputs.push(inputs[i]);         }      }      for(var j = 0; j < textInputs.length; ++j) {         textInputs[j].onclick = function() {            this.style.backgroundColor = (this.style.backgroundColor == "red") ? "white" : "red";         }      }      for(var k = 0; k < textareas.length; ++k) {         textareas[k].onclick = function() {            this.style.backgroundColor = (this.style.backgroundColor == "blue") ? "white" : "blue";         }      }   </script>

KevinM1 · February 4, 2010

It works in my test file:

<!DOCTYPE html>
<html>
   <head></head>

   <body>
      <form name="form1" action="#" method="post">
         <input type="text" />
         <br />
         <textarea></textarea>
         <br />
         <input name="submit" type="submit" value="Submit" />
      </form>
   </body>

<script type="text/javascript">
	var inputs = document.getElementsByTagName('input');
	var textareas = document.getElementsByTagName('textarea');

      var textInputs = new Array();

      for(var i = 0; i < inputs.length; ++i) {
         if (inputs[i].type == "text") {
            textInputs.push(inputs[i]);
         }
      }

      for(var j = 0; j < textInputs.length; ++j) {
         textInputs[j].onclick = function() {
            this.style.backgroundColor = (this.style.backgroundColor == "red") ? "white" : "red";
         }
      }

      for(var k = 0; k < textareas.length; ++k) {
         textareas[k].onclick = function() {
            this.style.backgroundColor = (this.style.backgroundColor == "blue") ? "white" : "blue";
         }
      }
   </script>

</html>

otuatail · February 4, 2010

Sorry I have tried this in FF IE8 Opera and Safari

http://www.yorkbaptist.org.uk/holclub/contactus.php

Does not change back to orifinal colour

otuatail · February 4, 2010

this.style.backgroundColor = (this.style.backgroundColor == "red") ? "white" : "red"; } }

This seems to be the problem. It dosn't reverse.

Desmond.

otuatail · February 4, 2010

Ah Got it. What I need is a kind of (As microsoft would say) Got focus and lost focus. This means that when you click in the next text box the previous text box realises that it has left and then goes back to white or the colour it was originaly.

Desmond.

Also can this be done in php in the form of

<?

include "colourCode.js" ?>

if you get where i am comming from

?>

KevinM1 · February 5, 2010

Ah Got it. What I need is a kind of (As microsoft would say) Got focus and lost focus. This means that when you click in the next text box the previous text box realises that it has left and then goes back to white or the colour it was originaly.

Well, you never specifically said you wanted the other inputs to change back to white if some other input was clicked. Again, it's an easy fix. Create a CSS class (or classes) that will contain the clicked background color you want. Then, inside the script, we can add/remove this class from the proper elements. I'll write it up after I have some caffeine.

Also, you may be able to include the JavaScript file that way, but you'd need to put the include inside of some HTML, like so:

<script type="text/javascript">
   <?php include("colorCode.js"); ?>
</script>

I'm not sure if it would work, however.

KevinM1 · February 5, 2010

Okay, here's a new test file and script. The test file will illustrate how you should view the process. It's pretty much identical to my other test files:

<!DOCTYPE html>
<html>
   <head>
	<style>
		.clicked { background-color: red; border: 1px solid black;}
	</style>
</head>

   <body>
      <form name="form1" action="#" method="post">
         <input type="text" />
         <br />
         <textarea></textarea>
         <br />
         <input name="submit" type="submit" value="Submit" />
      </form>
   </body>

   <script type="text/javascript">
      var inputs = document.getElementsByTagName('input');
      var textareas = document.getElementsByTagName('textarea');
      var textInputs = new Array();
	var previousElement;

      for(var i = 0; i < inputs.length; ++i) {
         if (inputs[i].type == "text") {
            textInputs.push(inputs[i]);
         }
      }

      for(var j = 0; j < textInputs.length; ++j) {
         textInputs[j].onclick = function() {
            this.className = (this.className == "clicked") ? "" : "clicked";

			if (previousElement != null) {
				previousElement.className = "";
				previousElement = this;
			}
			else {
				previousElement = this;
			}
         }
      }

      for(var k = 0; k < textareas.length; ++k) {
         textareas[k].onclick = function() {
            this.className = (this.className == "clicked") ? "" : "clicked";

			if (previousElement != null) {
				previousElement.className = "";
				previousElement = this;
			}
			else {
				previousElement = this;
			}
         }
      }
   </script>

</html>

As you can see, I added a simple CSS class called 'clicked'. This class contains the styling that will be applied to any clicked and focused text input or textarea. In order to turn off the styling on other, non-focused elements when a new one is clicked, you must keep track of which element was last active. So, I added a variable to the JavaScript named previousElement that tracks that element.

Let's say you've already clicked on a textarea. That element is stored in the previousElement variable. When you click on some other form element that can have a different background, the clicked class is added to that new element and removed from previousElement. The new element is then stored in previousElement, so additional clicks can toggle the effect.

Now, this toggling won't work if you click on some non-input element. If that's what you want, you should probably use a framework like jQuery, as that will handle some of the more tedious parts of the script in the background, and make designing the functionality you want much easier. The more complex the functionality, the more nitty gritty details you must understand. Since you seem to be pretty new to JavaScript, that sort of thing may only confuse you further as the nuts-and-bolts code can hide what its actually doing as a whole.

Sign In

Change <input type="text"> background

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information