jQuery placeholder/hint JavaScript that keeps the hint on focus

Question

There are hundreds of jQuery placeholder/hint plugin. But none that do what I want it to do

I'm looking for one that will:

Fade the hint when the user focuses on the field, but not clear it until the user starts typing (like the StackOverflow/iOS one)
Will work with the HTML5 placeholder attribute.
Built with jQuery
Cross browser (including IE7/IE8)
Uses unobtrusive JavaScript
Ideally would also Work with password fields

It's tricky, because the HTML5 spec states that the *placeholder* value should [disappear on focus](http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute), so of course any polyfills are going to try to align with that requirement (to the detriment of usability) so that the behaviour is consistent with browsers that have native placeholder support. — Roatin Marth, Aug 12 '11 at 14:01
Not a good UX - If you fade it, it'd make the text appear garbled. If you fade it further to alleviate garbling, you might as well clear it. — Mrchief, Aug 12 '11 at 14:05
See also: http://stackoverflow.com/questions/8574356/html5-placeholder-disappears-on-focus — ripper234, May 06 '12 at 10:23

Chris Pratt · Answer 1 · 2011-08-17T20:46:14.117

@Roatin Marth is right; if you're going to treat the text as a placeholder, it's supposed to clear. That's the very definition of a placeholder.

Still, I mocked up a proof of concept that you're welcome to use as you like. However, I had to make the placeholder text so light it's barely viewable to keep it from garbling the front text too much (which is why the default behavior is to clear it).

You can see it working at: http://jsfiddle.net/zYQ4Q/4/

// Create placeholder input to serve as background
var $test = $('#test');
var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder'));
var $container = $('<span class="placeholder-container"></span>');
$container.insertAfter($test).append($test).append($placeholder);

// Basic styling
$container.css({
   position: 'relative'
});
$test.css({
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 10,
    backgroundColor: 'transparent',
    borderColor: 'transparent'
});
$placeholder.css('color', 'transparent');

// Behavior for focus and blur to achieve the visual effect
$test.focus(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   $placeholder.css('color', '#e0e0e0');
}).blur(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   if ($input.val() == '')
       $placeholder.css('color', 'transparent');
}).keyup(function(){
    var $input = $(this);
    if ($input.val().trim() != '') {
        $placeholder.val('');
    } else {
        $placeholder.val($input.attr('placeholder'));
    }
});

UPDATE: Code and jsfiddle have been updated to reflect new changes based on OP's comment. The placeholder now clears after text has been entered into the input.

To clarify, it is supposed to clear, but just when the user starts typing, not when they focus on the field — Shai Coleman, Aug 15 '11 at 17:08
This was very helpful, but: It doesn't work with IE7/IE8. It doesn't work properly with password fields. It isn't packaged as a jQuery plugin. However, thanks to the code there, I've managed to find jQuery-Watermark which does exactly what I wanted to. — Shai Coleman, Aug 19 '11 at 13:08

Shai Coleman · Accepted Answer · 2011-08-19T13:12:54.260

1

Update, thanks to chrisdpratt I've actually found a plugin that does what I want it to:

Demo: http://labs.mario.ec/jq-watermark/

Source: https://github.com/marioestrada/jQuery-Watermark

edited Aug 19 '11 at 13:12

answered Aug 19 '11 at 13:05

Shai Coleman

868
15
17

jQuery placeholder/hint JavaScript that keeps the hint on focus

2 Answers2