全局点击事件会阻止元素的点击事件

Question

This should happen
If the user clicks on one of the two input boxes, the default value should be removed. When the user clicks elswhere on the webpage and one text field is empty, it should be filled with the default value from the data-default attribute of the spefic element.

This happens
When somebody clicks somewhere on the page and the field is empty, the field will be filled with the right value, but when somebody clicks in the field again the text isn't removed. It seems like the $(document) click event is blocking the $(".login-input") click event, because the $(".login-input") is working without the $(document) click event.

JSFiddle
A sample of my problem is provieded here: JSFiddle

Tank you for helping!

Answer 1

When you click on the input, the script is working, but since the input is in the document, a click on the input is a click on the document aswell. Both function will rune, document is the last one.

That is called event bubblingand you need to stop propagation :

$(document).ready(function () {
    $(".login-input").click(function (e) {
        e.stopPropagation()
        $(this).val("");
    });
});

Fiddle : http://jsfiddle.net/kLQW9/3/

Answer 2

That's not at all how you solve placeholders, you do it like so :

$(document).ready(function () {
    $(".login-input").on({
        focus: function () {
            if (this.value == $(this).data('default')) this.value = '';
        },
        blur: function() {
            if (this.value == '') this.value = $(this).data('default');
        }
    });
});

FIDDLE

Preferably you'd use the HTML5 placeholder attribute if really old browsers aren't an issue.

EDIT:

if you decide to do both, check support for placeholders in the browser before applying the javascript :

var i = document.createElement('input'),
hasPlaceholders = 'placeholder' in i;

if (!hasPlaceholders) {
    // place the code above here, the condition will 
    // fail if placeholders aren't supported
}

Answer 3

Try below code

$(document).ready(function () {
    $(".login-input").click(function () {
        $(this).val("");

    });
});
$(document).ready(function () {

    $(".login-input").each(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });
    $(".login-input").blur(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });

});

Check fiddle

Answer 4

Why not to use focus and blur events?

$(document).ready(function () {
    $(".login-input").focus(function () {
        $(this).val("");
    });
});
$(document).ready(function () {    
    $(".login-input").blur(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });    
});

http://jsfiddle.net/kLQW9/5/

PS In yours, and this code, on focus all data fro input will be cleared. If you need to clear only default text, add proper condition for that.