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

这可能有点长，没有必要在$ function（）中包含对inputHint（）的调用，因为它已经在你的ready函数中了。试试这个：

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

Answer 2

我不确定你为什么要使用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);
};

Jquery浏览器兼容性问题，我做错了什么？

2 个答案: