0

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
25
Views
3 Years
Discussion Span
Last Post by tqmd1
0

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?

0

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

0

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?

1

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.