Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 6 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery form titles

AshleyAshley

I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fields

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.


$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML


 <form method="post" action="">

	    <input type="text" class="form-field" name="Name" defaultVal="Name" value="" />
            <input type="text" class="form-field" name="Phone" defaultVal="Phone Number" value="" />
            <input type="text" class="form-field" name="Email" defaultVal="Email address" value="" />
            <input type="text" class="form-field" name="Url" defaultVal="Site URL" value="" />

	</form>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 12
  • Edmilson
    Posted on

    Edmilson Edmilson

    Reply Author

    Muito Ăștil!


  • scannermobs
    Posted on

    scannermobs scannermobs

    Reply Author

    Brilliant stuff! a validation-passing version would be great if you figure it out. Cheers for all your work


  • chrisgun
    Posted on

    chrisgun chrisgun

    Reply Author

    How can i cange this with a password field, that it shows “Password” when there is nothing writen in the Field and then “***********” when the User enters something?


  • yassi
    Posted on

    yassi yassi

    Reply Author

    this post defaultVal not form value.


  • Ann
    Posted on

    Ann Ann

    Reply Author

    It would be even better if you could use actual “label” tag value to do that. This way the form would be more accessible.


  • yara
    Posted on

    yara yara

    Reply Author

    When you submit form the string into the input field is changed by defaultVal string.


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    My main issue with this technique is the use of an attribute that is not actually an attribute.

    defaultVal obviously does not validate. :)

    as for HTML5 placeholder… very handy indeed, but I believe my client’s requirement of IE6+ compliant site is to be forgotten !


  • desfossez Thomas
    Posted on

    desfossez Thomas desfossez Thomas

    Reply Author

    I use this by exemple, its really simple:


  • Andrew
    Posted on

    Andrew Andrew

    Reply Author

    Appreciated – Was just about to try and find something like this!


  • Adam S
    Posted on

    Adam S Adam S

    Reply Author

    Yeah, I’d suggest you use placeholder, and you can mod the script to pull the “placeholder” value for pre-HTML5 browsers. You can detect placeholder support:


    function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
    }


  • Mihail Dzantiev
    Posted on

    Mihail Dzantiev Mihail Dzantiev

    Reply Author

    html5 placeholder it will be easier…