Changing Form Input Styles on Focus with jQuery

A lot of forms can be boring and plain, don’t let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.


The Goal

We want to make a form with input fields that change their appearance when they are focused on. Get on board and check out the example.

jQuery Form Styleing

Step 1 – The Groundwork

First we’ll need to set up the form we will be using.

I have included “Type something here” as the default value for the input. This is the text that will display initially but disappear when the field gets focus.

Step 2 – The CSS

Now we make the fields look pretty. I’ve done some styling based on my taste, but you will need to include classes for the active/inactive styles of the fields, I have used idleField and focusField.

It is also important to note that if you want to remove the blue glow that Safari applies around the field in focus, you will need to include outline:none on those inputs.


Step 3 – Bring on the jQuery

Here’s the part where we add the on focus effects to the inputs in the form. We want a two things to happen when a input field gets focus, 1. The selected field will shift from the inactive class to the active one and 2. The default text inside the box (‘Type something here”) will disappear. Similarly, we want the opposite to happen when the field loses focus.

Let’s break down what we just put together, initiated by the page loading:

For every text input apply the class idleField to it

When a text input gets focus, remove the inactive style and add the active style.

When the user clicks the input field we want the text “Type something here” to go away, if the user has not already typed something else in. The following checks to see if the text value is what it started as when the form loaded.  If it is, it gets cleared to make room for user input.

If the user has already typed something in a field, instead of getting cleared when they click on that field again, we want the content to be highlighted.

The next part of the script handles what happens when an input field loses focus, essentially doing the opposite of what was just explained.

One difference worth noting is the use of $.trim(), which cleans out white space leading and following user input. Keep in mind that if a user submits the form without altering the default values(“Type something here”), those are the items processed by the form. You can correct this by adding a check/action when the submit button is pressed.

The Finished Product

That’s pretty much the deal, now go forth and make some jazzy forms.

Posted Saturday, January 24th, 2009 · Back to Top

SPONSOR

Add Comment

100 Comments 87 Mentions

  1. shinokada Author Editor

    I learned something today. Thanks.
    But I didn’t get one thing.
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    Can you explain a bit more what is happening here?
    I am looking forward to reading more.

    ·

  2. Razvan Pavel Author Editor

    no ofence but why write all the extra jquery when you can add input[type="text"]:focus in the CSS and it will work like a charm. (only on modern browsers, but that’s a small price to pay for the people that still use IE6)

    ·

  3. Sam Dunn Author Editor

    @shinokada
    $.trim(this.value) == ” strips away spacing before and after the value, which prevents them submitting a blank value by just hitting the spacebar.
    this.value = (this.defaultValue ? this.defaultValue : ”); is a shorthand IF statement. This basically sets the current value of the field, to either this.defaultValue OR ‘ ‘ (More on that here – http://davidwalsh.name/php-shorthand-if-else-ternary-operators)

    @Razvan
    The one problem with doing this in CSS, besides IE6 users (sigh), is that you will lose the ability to have the text in box that disappears on focus. Although to be fair if you really wanted I’m sure you could emulate the effect by setting the background-image to text on inactive. But still, IE6 isn’t dead yet, we have to put up with them a little longer

    ·

  4. Clayton Author Editor

    Hi!
    I wrote some similar code and shared it as well, perhaps you’d be interested in checking out my script:
    http://claytonrabenda.com/web-development/css-stylizing-text-input-elements-with-background-images

    ·

  5. Roux Author Editor

    I honestly don’t get this… So I’m pretty sure we can do this all with CSS (changing the border and background on focus), and the only thing this really does is add the ability to take text and make it disappear. But isn’t that already built in?

    ·

  6. Roux Author Editor

    input type=”text” value=”Enter your email” onFocus=”this.value=””
    (without angle brackets)

    ·

  7. Sam Dunn Author Editor

    @Roux
    As I said above, the :focus will cause errors in IE6, which prevents style changes for those people.
    Furthermore with the way you have done it, it will not replace the text to “Enter your Email” when it loses focus.

    ·

  8. Schalk Neethling Author Editor

    Nice article, thanks! One thing, you need to add outline:none for Chrome as well.

    ·

  9. Fluminis Author Editor

    Nice article.
    You probably could try to chain the jQuery methods in order to save a little extra work (jQuery walk though the DOM 3 times in your example).

    $(‘input[type="text"]‘).addClass( … ).focus( … ).blur( … );

    ·

  10. cx42net Author Editor

    I’ve just found your article and something bother me.
    Where did you define the value of defaultValue (this.defaultValue) ?

    ·

  11. Sam Dunn Author Editor

    @cx42net
    defaultValue is already part of the DOM, so it’s all taken care of going in

    ·

  12. Mark Aplet Author Editor

    Interesting write up. Great trick if you must support IE6 with this type of styling. Not sure it’s worth it (ROI) for the most part. I personally would rather use the css input:focus method. That’s a lot of code to support one browser. All that aside, I think this is a great trick to add to the toolbox.

    ·

  13. M. khalid Author Editor

    Thanks Sam Dunn;

    I am was really searching for this type of script so I got it by your help, but one thing I noticed that when I type the text in input and click outside of the input turn the new typed text to gray as it was with default text.

    If there is any solution please suggest me.

    Thanks & waiting for your reply.

    ·

  14. Sam Dunn Author Editor

    @M. khalid
    It’s good that you pointed that out, as I was debating whether or not to include it in the tutorial.
    Basically it’s an easy fix. What you’ll want to do is come up with another class for the completed form input and adjust the code like this:
    $(‘input[type="text"]‘).blur(function() {
    if ($.trim(this.value == ”)){
    $(this).removeClass(“focusField”).addClass(“idleField”);
    this.value = (this.defaultValue ? this.defaultValue : ”);
    } else {
    $(this).removeClass(“focusField”).addClass(“completedField”);
    }
    });

    ·

  15. James Author Editor

    I would argue that it’s not good practice to (ab)use the input value to do the job that the label element should be doing. – Have a look at the login form on my site – I’ve used jQuery to position the label elements over the top of the inputs and hide/show them as necessary. This has semantic and accessibility benefits, and also allows for a non-javascript fallback by placing the labels next to the inputs.

    James

    ·

  16. author Author Editor

    Thank you posting this! I’ve been trying to figure out how do this with jQuery, but you nailed it!

    ·

  17. 1.april Author Editor

    Thanks for code :)
    But I found a little bug there on these lines:

    1. if ($.trim(this.value == ”)){
    2. this.value = (this.defaultValue ? this.defaultValue : ”);
    3. }

    Notice, that right bracket should be after this.value in first line.. If is not, the condition never returns true. :)
    This is my correct version:

    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }

    But great work however!

    ·

  18. anony Author Editor

    @april > Thank you so much! Being somewhat new to javascript and using this tut to get used to the semantics, I was tearing my hair out trying to figure out where I messed up and why it wasn’t working!

    Great tut by the way!

    ·

  19. Andrew Author Editor

    With a lot less code, you can do the following:

    ·

  20. Petr Author Editor

    Very bad from accessibility point of view. You should use label and hide it then with JQuery.
    Something like http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/

    ·

  21. Correohs Author Editor

    How can I do same effect for Checkbox ?
    Thanks

    ·

  22. Web Design Npal Author Editor

    Hi ! Thanks all for this work……

    Web Design Nepal Team

    ·

  23. wpdigger Author Editor

    I think I got some result. Thank you here.

    wpdigger’s last blog post..Theme Membership Sites – Are those really useful

    ·

  24. Noe Ruiz Author Editor

    Awesome example and explanation! In a situation where there’s multiple fields, how can we auto focus the very first input? I was hoping its as easy as implementing the $(:text:visible:enabled:first).focus(); method, seems to do the trick, but the auto focus won’t trigger addClass event. Perhaps I need to read up on event delegation?
    [rq=3813,0,blog][/rq]FLOverload iPhone Game

    ·

  25. jack Author Editor

    Good article, i wonder how to change this script to apply all others form field, like textarea, checkbox, radio, and etc.
    Thanks.

    ·

  26. torka Author Editor

    wow!!! thanks :D
    anyways, I agree with jack.
    .-= torka´s last blog ..Traume =-.

    ·

  27. brandon Author Editor

    @Noe Ruiz

    I duplicated the .addclass, .focus and .blur lines and replaced ‘input[type="text"]‘ with ‘textarea’ for example.

    I’m sure there’s an easier option than this as I am by far no expert.

    ·

  28. brandon Author Editor

    Correction ( not @Noe Ruiz)

    @jack

    I duplicated the .addclass, .focus and .blur lines and replaced ‘input[type="text"]‘ with ‘textarea’ for example.

    I’m sure there’s an easier option than this as I am by far no expert.

    ·

  29. Rocklion Author Editor

    Thank you for this wonderful script :)

    @brandon
    Just replace input[type="text"] with input[type="text"],textarea and it will work fine, without writing useless code.

    ·

  30. Claudio Author Editor

    congratulations from chile,

    works fine, but i modified the class “idleField”, in the background-color and instead of that i put an image (an icon) and looks very good.

    but i have problems when i delete the text and then blur.

    how can i fix this?
    here is the link:

    http://pascal.inf.uct.cl/~dip_chermosilla/testing/test.php

    ps: sorry my english, i did my best.

    ·

  31. Colin Author Editor

    Thanks for this. I’ve learned that if I add “buildinternet” to a lot of my google search queries I will find the solution to my problem.

    Although this tutorial exists elsewhere in various forms yours in the best. The prose alone makes it a cut above the rest.

    Thanks again

    ·

  32. Colin Author Editor

    Hi again, while my previous comment still stands. I found that this plugin: http://labs.thesedays.com/projects/jquery/clearfield/ actually provides what your tutorial covers.

    I do encourage learning and I learned some built in jQuery functions because of this but for ease of use. I specifically needed a different solution because I found that I needed to apply this to multiple fields all with different styles. So my code became cluttered and confusing quickly.

    ·

  33. Gus Author Editor

    Colin thank you very much for the post with the clearfield i was about to ask them that question…. Awesome !

    ·

  34. Joghn Secada Author Editor

    http://plugins.jquery.com/project/JQF1

    Man! Look this form style plugin! It`s the most complete form style plugin! Works at IE 6 7 8, Safari (win and mac), firefox (win and mac), Opera, Chrome…

    ·

  35. Sedat Kumcu Author Editor

    Thanks for this sample. Best regards.

    ·

    • Gay David Author Editor

      Hi !

      Great job ! Thanks for sharing. Very good tutorial .

      ·

  36. Cirday Author Editor

    ———-snip———-
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    ———-snip———-

    So, first, you check if they are equal, then again if they are not equal? you know, IF has a wellknown sibling called “ELSE” ;)

    ·

  37. William Author Editor

    To get working textarea I just did this $(‘input[type="text"],textarea’)

    ·

    • James Author Editor

      Excellent Article I am always looking to improve my forms. I love jquery and this will help in in a few projects in the future.

      ·

  38. Stephen Author Editor

    That worked for me aswell William,

    and it saved at 666 bytes, scary stuff.

    ·

  39. Briton Author Editor

    Why didn’t you mention that you must include:

    That’s pretty darn important is it not?

    ·

  40. Flo Author Editor

    Anyone reading Sam’s answer to M. khalid, about “completed field”:

    Don’t forget to remove both classes on focus.
    $(this).removeClass(“idleField completedField”).addClass(“focusField”);

    ·

  41. italo Author Editor

    Hey… In the first code of Step 3, there is an error in the 14 line.

    Error
    - if ($.trim(this.value == ”)){

    It should be, this
    - if ($.trim(this.value) == ”){

    I hope this has been helpful…

    ·

  42. haries Author Editor

    hi…nice work, hope this helpful for everyone…thanks

    ·

  43. Ken Author Editor

    expert way to write tutorials.

    ·

  44. Alex Author Editor

    Hey there, looking for something like this that uses jQuery for a commercial project, and thought I’d just jump on and say that for some unknown reason, this causes errors in the jquery min file in versions 1.4.1 and 1.4.2. :(

    ·

  45. em Author Editor

    Everyone seems to be saying that the :focus pseudo class doesn’t work for IE 6. Um….. has anyone noticed it doesn’t work for IE 7 either? kinda hard to make professional web sites and not support IE 7. That’s where this piece of code comes in real handy. Thanks for doing it!

    ·

  46. A Author Editor

    hello…

    ·

  47. Antti202 Author Editor

    Brilliant script!
    Thanks for the bugfix, italo, it didn’t work without it.

    Alex, apply italo’s bugfix and it will work with 1.4.2 minimized.

    ·

  48. waleed Author Editor

    Create a #registration #form using #HTML5 and #CSS3 http://bit.ly/brbTDz

    ·

  49. Alex Author Editor

    Thanks. It really helped me. Sometimes when it’s hard to get to original HTML (like Gravity forms), you need to use tricks like this.

    ·

  50. paul010 Author Editor

    Hi, very nice script!
    How can someone get include the password field on the script?

    ·

    • cyberv Author Editor

      add something like this in your style
      #password{
      width:400px;
      padding:5px;
      outline:none;
      height:20px;
      font-weight:bold;
      }

      and add this in the script

      // password boxes
      $(document).ready(function() {
      $(‘input[type="password"]‘).addClass(“idleField”);
      $(‘input[type="password"]‘).focus(function() {
      $(this).removeClass(“idleField”).addClass(“focusField”);
      if (this.value == this.defaultValue){
      this.value = ”;
      }
      if(this.value != this.defaultValue){
      this.select();
      }
      });
      $(‘input[type="text"]‘).blur(function() {
      $(this).removeClass(“focusField”).addClass(“idleField”);
      if ($.trim(this.value == ”)){
      this.value = (this.defaultValue ? this.defaultValue : ”);
      }
      });
      });

      ·

  51. Andy Author Editor

    I repeat @paul010 sentiments:

    It would be nice to get this working w/ a password field; to properly display “Password” then to convert the user’s text into the password dots or *****

    ·

  52. Mikkel Author Editor

    Use suggestion from earlier or defaultvalue will not work.

    Thanks for code :)
    But I found a little bug there on these lines:

    1. if ($.trim(this.value == ”)){
    2. this.value = (this.defaultValue ? this.defaultValue : ”);
    3. }

    Notice, that right bracket should be after this.value in first line.. If is not, the condition never returns true. :)
    This is my correct version:

    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }

    ·

  53. soma Author Editor

    Thank you for this wonderful script :)

    @brandon
    Just replace input[type="text"] with input[type="text"],textarea and it will work fine, without writing useless code.

    ·

  54. Le Moustique Author Editor

    Hello,

    I use this script thanks M8. :-)

    I have just 1 question:

    You can set the focus on input and textarea. But the select does not work.

    How can you get this to work with select ?

    I get erros when i add select :-(

    thanks

    ·

  55. Le Moustique Author Editor

    I got it to work

    $(‘input[type="text"],textarea,select’).addClass(“idleField”);

    $(‘input[type="text"],textarea’).focus(function() {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });

    $(‘input[type="text"],textarea’).blur(function() {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });

    $(‘select’).focus(function () {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    });

    $(‘select’).blur(function () {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    });

    ·

  56. Dan Hatton Author Editor

    I was just wondering if are going to update the tuturial to include the fixes everyone has suggested?

    Apart from that great tuturial, I will be using this in some of my projects that need forms :)

    Dan

    ·

  57. Steven Author Editor

    The 14th line of the first code block in step 3 has one little mistake.
    It should be “if ($.trim(this.value) == ”){” rather than “if ($.trim(this.value == ”)){“.
    However, thanks for your code!
    :-)

    ·

  58. Brett Author Editor

    Loved the tutorial, thought I’d pass along how I got it to work with a textarea input so I could apply this to a “comments” box.

    I just added another function and two more classes in the css.

    $(document).ready(function() {

    $(‘input[type="text"]‘).addClass(“idleField”);
    $(‘input[type="textarea"]‘).addClass(“idleFieldArea”);
    $(‘input[type="text"]‘).focus(function() {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });

    $(‘input[type="textarea"]‘).focus(function() {
    $(this).removeClass(“idleFieldArea”).addClass(“focusFieldArea”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });

    $(‘input[type="text"]‘).blur(function() {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });

    $(‘input[type="textarea"]‘).blur(function() {
    $(this).removeClass(“focusFieldArea”).addClass(“idleFieldArea”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });
    });

    And the css:

    .focusFieldArea{
    border:solid 2px #67383a;
    background:#d6c8c8;
    color:#000;
    -webkit-box-shadow: 0px 2px 10px rgba(35,34,34,0.9);
    -moz-box-shadow: 0px 2px 10px rgba(35,34,34,0.9);
    }

    .idleFieldArea{
    background:#ede9e9;
    color: #6F6F6F;
    border: solid 2px #605e5e;
    }

    (couldn’t resist throwing a CSS3 shadow on the focused field)
    However I’ve now reached the far end of my javaScript skills and I’m wondering if anyone can recommend a good validation script that will work along with this setup?

    ·

  59. ali Author Editor

    thanks for the blog entry… it really helped!

    ·

  60. QL Studio Author Editor

    Hi,

    I’ve made this into a tiny jQuery extension – adding textareas – but I need it also to work on content loaded via AJAX – any idea about the best way to bind this?

    // jQuery extended functions ##
    (function($) {

    // change class on focus / blur ##
    $.fn.focusing = function(options) {
    $(‘input[type=text], textarea’).addClass(“idleField”);
    $(‘input[type=text], textarea’).focus(function() {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });
    $(‘input[type=text], textarea’).blur(function() {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });
    }

    })(jQuery);

    $(document).ready(function() {

    // autogrow textareas ( $.fn.autogrow ) ##
    $(function() {
    $(‘input[type=text], textarea’).bind().focusing();
    });
    });

    ·

  61. QL Studio Author Editor

    I also tried.. still no luck:

    $(function() {
    $(‘input[type=text], textarea’).addClass(“idleField”); // reset all ##
    $(‘input[type=text], textarea’).bind(“focus”, function(event){
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    }).bind(“blur”, function(event){
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });

    });

    ·

  62. QL Studio Author Editor

    here’s the answer:

    $(function() {
    $(‘input[type=text], textarea’).addClass(“idleField”); // reset all ##
    $(‘input[type=text], textarea’).live(“focus”, function(event){
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    //this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    }).live(“blur”, function(event){
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    //this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });

    });

    ·

  63. jooleeo Author Editor

    ie6 should be eliminated from the universe! (all ie should be!)

    ·

  64. Jeune gay Author Editor

    Thank this for script, it’s fabulous !!!!

    ·

  65. John Author Editor

    Hey Thanks for the post…

    I have 1 suggestion, for the sake of lighter code.

    Seeing as how we should always try to keep CSS dominant…
    Specify a class to add onFocus, but not an idle one (keep that one as default CSS state for inputs, don’t reply on JS to add the style.
    Strip the class when you leave focus.

    You have a great Google rank for this topic, so thanks for the relevant content :)

    ·

  66. John Author Editor

    Okay I just modified the code above and my method works like this…

    JS (in external JS file):
    function inputClass(){
    $(document).ready(function() {
    $(‘input[type="text"],textarea’).focus(function() {
    $(this).addClass(“focusField”);
    });

    $(‘input[type="text"],textarea’).blur(function() {
    $(this).removeClass(“focusField”);
    });
    });
    };

    CSS:
    input, textarea { some styling whatever}

    .focusField {some styling blah}

    HTML:

    inputClass();

    I think I’m the winner!!! Am I the winner?

    ·

  67. Husien Adel Author Editor

    thanks a lot for that tip ;)

    ·

  68. Alex Author Editor

    You don’t any JS for this, check this CSS only solution:

    #status {
    width: 50%;
    padding: 10px;
    outline: none;
    height: 36px;
    background: #EEE;
    color: #6F6F6F;
    border: solid 2px #DFDFDF;
    }

    #status:focus {
    border: solid 2px #73A6FF;
    background: #EFF5FF;
    color: #000;
    }

    ·

    • Jessica Author Editor

      You have shed a ray of snuhsine into the forum. Thanks!

      ·

  69. Jason Author Editor

    For those who, like myself, do not want the values inputted to be greyed out after you leave the text field, use this code on the last part:

    $(‘input[type="text"]‘).blur(function() {

    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    $(this).removeClass(“focusField”).addClass(“idleField”);
    }
    });

    It only adds the idleField when there is not a value in the text form. Otherwise if you put something in there, it won’t take that value and make it idle.

    ·

  70. Tom Author Editor

    Great tutorial, this has made my contact page look great now! thanks :D

    ·

  71. Luke Author Editor

    Not bad code, but soon as you click on a submit button the input fields return to default which is a fairly large bug in the code. May I suggest you fix the original code.

    ·

  72. Ben McClure Author Editor

    This might have been mentioned before. In response to Razvan at the beginning of the comment thread, you indicated that the only issue (besides IE6 compatibility) keeping you from using pure CSS is that the placeholder text would not appear/disappear properly without Javascript.

    All modern browsers, however, have now implemented HTML’s ‘placeholder’ attribute in form input fields. You don’t even need Javascript to get fully working placeholder text.

    So if one wishes to go pure HTML/CSS, it can be fully replicated without Javascript, although it will only work in relatively modern browsers.

    ·

  73. Shaun Author Editor

    Hi there,

    First off thanks for the code I’m new at all of this and have found your tut very easy to follow.

    I am trying to incorporate this effect into a , how would I do so?

    ·

  74. JB Author Editor

    Thank you for this useful tutorial.

    I would like to know how I can achieve the task described below .

    When the input fields have text in them I want the field to be idle ,but if the input fields are empty I want the input field to be focus… even if the user has deleted the text in the input field.

    Also I would like to have an image to appear on the side of the fields (gray – focus and blue – idle).

    How can i achieve this?

    ·

  75. oscar Author Editor

    save me a lot of trouble dude thanks a lot….

    ·

  76. Sammy Author Editor

    Hi,
    I tried your plugin. Seems nice with only one hitch. :)
    What if default text and user written text is same. It will always fall back to repetitive actions.

    ·

  77. Martin Author Editor

    Hi

    Can anyone supply me with the code to have two forms on one page in my site but each to have different coloured focus fields?

    I would like to have one colour for one form, and different colours for an alternative form

    thanks

    Martin

    ·

    • Chris Bourke Author Editor

      Thanks heaps Sam. Very helpful info. It will save me hours!

      ·

  78. Rali Madhu Author Editor

    I am looking for same effect from long time, thanks for posting!
    look my article bank http://www.addcolours.com/blog

    ·

  79. Abdelkader Soudani Author Editor

    Thanks for the code, very useful
    has anyone tried it on IE6?

    ·

  80. andrea Author Editor

    think it’s easyer using focus() and focusout() with a simple function:

    $(“input”).focus(function(){
    //some actions
    });

    and

    $(“input”).focusout(function(){
    some actions
    });

    ·

  81. deo Author Editor

    we

    ·

  82. kevin Author Editor

    Great article! I was considering using rel as the default value and then checking against that attribute to determine whether or not the value should be cleared on focus.

    ·

  83. Kuttan Author Editor

    Thank you for this useful tutorial.

    ·

  84. tes Author Editor

    can you please update this, its not working with jq 1.7.1, when you focus out the field, it reset to default value used at start.

    ·

  85. Bohry Author Editor

    Very nice! I make a little change to able this effect to textarea´s too. Danke!!!!

    ·

  86. earthdesigner Author Editor

    I was thinking that simplified version would be to create just a css class “focus” then all the javascript will resume to:

    $(‘input[type=text], textarea’).focus(function(){ $(this).addClass(‘focus’) }).blur(function(){ $(this).removeClass(‘focus’)});

    Good article anyway ;)

    ·

  87. Shaun Author Editor

    Hi There,

    Thank you for the code. I’m have one little problem making it work with ‘textarea’ I can get it to work but the textarea won’t recognize rows? Can you help please

    Build Internet! | Changing Form Input Styles on Focus with JQuery

    $(document).ready(function() {
    $(‘input[type="text"],textarea’).addClass(“idleField”);
    $(‘input[type="text"],textarea’).focus(function() {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });
    $(‘input[type="text"],textarea’).blur(function() {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    if ($.trim(this.value) == ”){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });
    });

    *{
    margin:0;
    padding:0;
    font:bold 12px “Lucida Grande”, Arial, sans-serif;
    }
    body {
    padding: 10px;
    }
    h1{
    font-size:14px;
    }
    #status{
    width:50%;
    padding:10px;
    height:42px;
    outline:none;
    }
    .focusField{
    border:solid 2px #73A6FF;
    background:#EFF5FF;
    color:#000;
    }
    .idleField{
    background:#EEE;
    color: #6F6F6F;
    border: solid 2px #DFDFDF;
    }

    Changing Form Input Styles on Focus with JQuery

    ·

    • Ahmad Nadeem Author Editor

      First of All thanks to Sam Dunn, and also Shaun, it really helped.

      ·

  88. krish Author Editor

    HI,

    Like the text-area i would like to add this for password how achieve it?

    ·

  89. DekWilde Author Editor

    I made some corrections in this script, refined some lines:

    $(‘input[type="text"]‘).addClass(“idleField”);
    $(‘input[type="text"]‘).focus(function() {
    $(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });
    $(‘input[type="text"]‘).blur(function() {
    if(this.value != this.defaultValue){
    $(this).removeClass(“idleField”).addClass(“focusField”);
    } else {
    $(this).removeClass(“focusField”).addClass(“idleField”);
    }
    if ($.trim(this.value) == ”){
    $(this).removeClass(“focusField”).addClass(“idleField”);
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });

    Thanks a lot

    ·

  90. jk Author Editor

    bcxnbvbxvcbvcv
    x
    xcv

    bcb
    gfbv
    v
    bvc
    bcv
    bcv
    b
    vbvbcvbvbvbvbb

    ·

  91. brandon Author Editor

    loved your tutorial but have one question to ask. how could i add an active focus on other input elements, like select and textarea?

    ·

  92. Besoin de parler Author Editor

    thank’s for this sharing !

    ·

  93. Web Design Services at Cheap Cost in San Jose Author Editor

    After visiting this post I got some interesting concept from my coming project and JQuery input styles are really very different and unique.

    ·

 

Build Internet by One Mighty Roar. Since 2008.