Проблема совместимости браузера JQuery, что я делаю не так?

Question

Вот еще одна проблема. Я использую JQuery-1, чтобы добавить простую интерактивность на одну из моих страниц. Короче говоря, страница содержит текстовое поле поиска в правом верхнем углу, на document.ready Я просто вызываю функцию inputHint (), которая добавляет фразу «поисковые продукты» в мое текстовое поле. Когда пользователь щелкает это текстовое поле, я вызываю другую функцию (в данном случае hideHint ()), чтобы скрыть фразу «Поисковые продукты» по умолчанию. Наконец, если пользователь оставляет текст без ввода и щелкает где-либо еще на странице, я снова показываю подсказку. Вот часть пользовательского JavaScript:

$.fn.inputHint = function(options) {
    options = $.extend({hintClass: 'hint'}, options || {});

    function showHint() {           
        if ($(this).val() == '') {  
        $(this).addClass(options.hintClass).val($(this).attr('accesskey'));             
        }
        else{}
    }

    function removeHint() {     
        if ($(this).hasClass(options.hintClass)) $(this).removeClass(options.hintClass).val('');            
    }

и вот обработчик document.ready (или как вы его называете):

$(document).ready(function(){

/* Initialize hint*/                       
  $(function() {
    $('*[@accesskey]').inputHint();
  });});    

Этот код получает желаемую функциональность, чтобы работать как шарм, но только в Google Chrome и Safari. IE и Firefox ведут себя очень устало (подсказка работает нормально, но если я перезагрузлю страницу, она волшебным образом останавливается!). Является ли мой код ответственным за это утомленное поведение, или это проблема самого JQuery (я всегда слышал, что JQuery совместим со всеми основными браузерами)? Идеи !?
PS: это JQuery-1

Answer 1

Я не уверен, почему вы используете атрибут accesskey для хранения вашей подсказки, но в любом случае ...

$.fn.inputHint = function(options) {
    options = $.extend({ hintClass: 'hint' }, options || {});

    $this = $(this);
    hintValue = $this.attr("accesskey");

    function showHint() {
        if ($this.val() == "") {
            $this.addClass(options.hintClass).val(hintValue);
        }
    }

    function removeHint() {
        if ($this.hasClass(options.hintClass)) {
            $this.removeClass(options.hintClass).val("");
        }
    }

    $this.blur(showHint)
         .focus(removeHint)
         .addClass(options.hintClass)
         .val(hintValue);
};

Answer 2

Это может показаться чем-то большим, нет необходимости заключать вызов inputHint () в функцию $ function (), так как она уже есть в вашей функции готовности. Попробуйте это:

$(document).ready(function(){
    /* Initialize hint*/ 
    $('*[@accesskey]').inputHint();    
});