CODEWITHSUNDEEP
javascriptjquerytextfield
Immers
Immers

Reputation: 339

script that pre-fills a textfield

I'm trying to find a script that will fill a textfield of say an optin form with a text like 'fill in your e-mail address' and dissappear when click on. I know they're all over the net but searching for it only returns javascript autofill scripts where suggestions are listed from a dropdown below the textfield.

Upvotes: 0

Views: 144

Answers (3)

Laurent Zuijdwijk
Laurent Zuijdwijk

Reputation: 611

HTML5 supports placeholder text, which you can use like this

  <input name="email" placeholder="Enter your email address" />

This will automatically disappear when you click on the textfield. For older browsers, you can use one of the above suggestions.

Upvotes: 2

Joe
Joe

Reputation: 15802

jsFiddle example

Or, a slightly different fiddle that doesn't require an ID on the label, but needs the textbox/label to be wrapped in something, for example a <p> tag.

HTML

<input type="text" name="email_address" id="Email" />
<label for="Email" id="EmailLabel">Please enter your email address</label>

CSS

label
{
    display: none;
}

jQuery

$(document).ready(function()
{
    $('#Email').focus(function()
    {
        $('#EmailLabel').show();
    }).blur(function()
    {
        $('#EmailLabel').hide();
    });
});

Upvotes: 0

Joseph Szymborski
Joseph Szymborski

Reputation: 1283

This is what I use on my website Expiringlinks.co. Now, if you only want to apply this to one input, change $('input') to $('#yourinputid'). The input field should have a value field that equals your before text.

var tempValue='';
    $('input').click(function(){
        tempValue = $(this).attr('value');
        $(this).attr('value','');

    });

    $('input').focusout(function(){
        if ($(this).attr('value')==''){
        $(this).attr('value',tempValue);
        }


    });

For you input field

<input type="text" value="Whatever you want to show before the click" />

Upvotes: 0

Related Questions