代码之家 › 专栏 › 技术社区 › Ahmed

jquery浏览器兼容性问题,我做错什么了?

cross-browser jquery

0

Ahmed · 技术社区 · 16 年前

还有一个问题我正在使用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();
  });});

这段代码获得了想要的功能,可以像charm一样工作,但只能在google chrome和safari上运行。IE和Firefox都有一个非常怪异的行为(提示工作正常,但是如果我重新加载页面,它会神奇地停止!)。是我的代码导致了这种异常行为,还是jquery本身有问题(我经常听到jquery与所有主流浏览器兼容)?思想!?
我是JQuery-1

2 回复 | 直到 16 年前

1

2

karim79 16 年前

这可能有点遥不可及,不需要在$function()中包装对inputhint()的调用,因为它已经在ready函数中了。试试这个:

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

2

Joe Chung 16 年前

我不知道为什么要使用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);
};