jQuery watermark StackOverflow like?

Question

I'm trying to implement something like StackOverflow's watermark functionality.

I'm using jquery-watermark for this. The problem I'm having is namely that the watermark text disappears as the input element gains focus, which doesn't happen here in SO (and I don't want it in my implementation either)

Is there some quick fix I could do for this, or perhaps a more SO-like watermarking library?

Answer 1

I guess you mean the PlaceHolder Text that is rendered into input fields as long as no input has been entered. And you want it to only disappear once the user enters some text instead of once he focuses the field?

a) I'd discourage that. I am currently playing with a JSFiddle to implement that and it's not that trivial .. And also there is the HTML5 Placeholder attribute that modern browsers will render out for you that provides this functionality "natively"..

b) It's a bit tricky. But here is the JSFiddle that shows the relevant code.

Here the code from the Fiddle:

$("#item")
    .addClass("watermark")
    .val("Watermark")
    .data('wm', true)
    .focus(function () {
        if ($(this).data('wm') === true) {
            var that = this;
            setTimeout(function () {
                that.setSelectionRange(0,0);
            }, 50);
        }
    })
    .keydown(function (evt) {
        if ($(this).data('wm') === true) {
            $(this).val($(this).val().replace('Watermark', ''));
            $(this).data('wm', false);
            $(this).removeClass('watermark');
        }       
    })
    .blur(function () {
        if ($(this).val().length === 0) {
            console.log("ran change");
            $(this)
                .addClass("watermark")
                .val("Watermark")
                .data('wm', true);

        }
    });

I am pretty sure the code can still be improved and maybe put into it's own jQuery plugin.. Also note that I did not test if it works on IE.. (And the Js still has some hardcoded values)

Answer 2

I wrote this JSFiddle for another question, but it works well. What it does is provide a jQuery fallback to the HTML5 placeholder attribute, as seamlessly as possible. It even does the whole "lighter text" thing when the watermark text is present. Hopefully it solves your problem.

Code from the fiddle:

$(document).ready(function() {
    $("input:text").each(function() {
        $(this).data("placeholder", $(this).attr("placeholder")).addClass("placeholder");
    });

    $("input:text").live("focus", function() {
        if($(this).val() == $(this).data("placeholder"))
        {
            $(this).val('').removeClass("placeholder");
        }
    });

    $("input:text").live("blur", function() {
        if(!$(this).val().length)
        {
            $(this).val($(this).data("placeholder")).addClass("placeholder");
        }
    });
});

Answer 3

The method used here is pretty crafty. The reason the text doesn't disappear is because it's not actually part of the input element. There is a span following the input field and the span has the placeholder text. The "dimming" effect of the placeholder text is achieved by manipulating the opacity of the input element.

• When the input field is blurred and empty, it has an opacity of 40%. (Placeholder span shows through fairly well.)

• When the input field is focused and empty, it has an opacity of ~60%. (Placeholder span shows through faintly.)

• When the input field is holding data, it has an opacity of 100%. (Placeholder span doesn't show through at all.)

Personally, I favor a method that uses a placeholder attribute as described by Tigraine. Even though HTML5 isn't finalized, I prefer this to having a separate element holding the text. (Speaking strictly about client-side HTML.) On second thought, it does degrade rather nicely...