Member Avatar for tqmd1

Dear Sir,

When control enter in any textbox then following codes must run.

Please help me what is wrong with my codes

<html>
<head><title>My Contacts</title>

<style type="text/css">
body{
margin-top:100px;
margin-left:100px;
}
</style>

<script type="text/javascript">

$(document).ready(function(){
    $('input[type="text"]').onfocus(function(){
    $('input[type="text"]').css({
        "background-color:silver"
        "font-size:12px"
        "color:green"
        }); 
     });
 });

</script>


</head>

<body>
<form>
 <input type="text" name="text1"><br />
 <input type="text" name="text2"><br />
 <input type="text" name="text3"><br />
 <input type="text" name="text4"><br />
</form>

 </body>
</html>
  • 3 Contributors
  • 6 Replies
  • 128 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by tqmd1
Member Avatar for stultuske

how do you know it's not running? do you get an error? does it change all the textboxes? does it change the wrong one? have you tried debugging, or just adding alert messages to check what runs when?

Member Avatar for tqmd1

No Error Message but also no response.

Member Avatar for JorgeM

Some syntax issues with your example...

try this..

<!doctype html>
<html>
<head><title>My Contacts</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('input[type="text"]').focus(function(){
    $(this).css({
        "background-color":"silver", 
        "font-size":"12px",
        "color":"green"
        }); 
     });
 });
</script>
</head>
<body>
<form>
 <input type="text" name="text1"><br />
 <input type="text" name="text2"><br />
 <input type="text" name="text3"><br />
 <input type="text" name="text4"><br />
</form>
 </body>
</html>

If you only want the currently "focused" input element to have its CSS changed, leave line 9 as is. If you want all of input elements to be changed when triggered by focus(), change line 9 to: $('input[type="text"]').css({

Edited by JorgeM
Member Avatar for tqmd1

Thanks sir, your codes work fine.

But...

I have another codes related to this topic. Please help me to make it workable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>my contacts</title>

<style type="text/css">
body{
margin-top:100px;
margin-left:100px;
}

.focus {
    border-bottom: #aa88ff 2px solid;
    border-left: #aa88ff 2px solid;
    background-color: #ffeeaa;
    border-top: #aa88ff 2px solid;
    border-right: #aa88ff 2px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $('input[type="text"]').focus(function() {
        $(this).addclass("focus");
    });

$('input[type="text"]').blur(function() {
    $(this).removeclass("focus");
});
</script>


</head>

<body>
<form>
 <input type="text" name="text1"><br />
 <input type="text" name="text2"><br />
 <input type="text" name="text3"><br />
 <input type="text" name="text4"><br />
</form>


 </body>
</html>

What i am doing wrong?

Member Avatar for JorgeM

Two issues...

1) move the jQuery block to the bottom of your page, just before the closing <body> tag.

2) jQuery is case sensitive. addclass and removeclass should be addClass and removeClass.

<!DOCTYPE html>
<html>
<head><title>my contacts</title>
<style>
body {
  margin-top:100px;
  margin-left:100px;
}

.focus {
  border: 2px solid #aa88ff;
  background-color: #ffeeaa;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<form>
 <input type="text" name="text1"><br />
 <input type="text" name="text2"><br />
 <input type="text" name="text3"><br />
 <input type="text" name="text4"><br />
</form>

<script>
    $('input[type="text"]').focus(function() {
        $(this).addClass("focus");
    });
    $('input[type="text"]').blur(function() {
        $(this).removeClass("focus");
    });
</script>

</body>
</html>

Also, in your CSS, notice I used the "border" shorthand property. Since you have the same values for each of the four borders (top, left, bottom, right), I dont see why you wouldnt use one property.. border: { }

Edited by JorgeM
Member Avatar for tqmd1

Thanks sir, problem solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.