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)