Событие щелчка элемента события глобального клика

Question

Это должно произойти
Если пользователь нажимает на одно из двух полей ввода, значение по умолчанию должно быть удалено. Когда пользователь нажимает elswhere на веб-странице и одно текстовое поле пуст, оно должно быть заполнено значением по умолчанию из атрибута data-default специального элемента.

Это происходит
Когда кто-то щелкает где-нибудь на странице и поле пусто, то поле будет заполнено правильное значение, но когда кто-то нажимает на поле снова текст не удаляется. Похоже, что событие щелчка $(document) блокирует событие click_$(".login-input"), потому что $(".login-input") работает без события клика $(document).

JSFiddle
Образец моей проблемы provieded здесь: JSFiddle

Танк вам за помощь!

Answer 1

Это не совсем как вы решаете заполнители, вы делаете это так:

$(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

Pr Вы можете использовать атрибут placeholder HTML5, если действительно старые браузеры не являются проблемой.

EDIT:

, если вы решите сделать и проверить поддержку заполнителей в браузере перед применением 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 2

Когда вы нажимаете на вход, скрипт работает, но поскольку ввод находится в документе, щелчок на входе также является щелчком по документу. Обе функции будут rune, документ - последний.

Это называется событие bubblingand вам нужно остановить распространение:

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

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

Answer 3

Попробуйте ниже код

$(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")); 
     } 
    }); 

}); 

Проверить fiddle

Answer 4

Почему бы не использовать фокусы и размытие событий?

$(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/

P.S. В вашем и этом коде на фокусе все данные для ввода будут очищены. Если вам нужно очистить только текст по умолчанию, добавьте для этого правильное условие.