2015-07-06 47 views
1

正常导航的选项卡按钮卡在Mozilla Firefox浏览器的此文本框中。在Tab键上按下它不会移动到下一个元素。在IE和Chrome中运行良好。任何人都可以帮我解决这个问题吗?默认选项卡导航在Mozilla中不起作用

<div class="editor-field"> 
     <div> 
     <input id="Rentaljeepshop" class="ui-autocomplete-input" type="text" value="Budget Rent A Car" name="Rentaljeepshop" maxlength="50" isautocomplete="true" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input> 
/div> 
</div> 

我jQuery是:

(function($, undefined) { 

$.widget("ui.autocomplete", { 
    options: { 
     appendTo: "body", 
     delay: 300, 
     minLength: 1, 
     position: { 
      my: "left top", 
      at: "left bottom", 
      collision: "none" 
     }, 
     source: null 
    }, 
    _create: function() { 
     var self = this, 
      doc = this.element[ 0 ].ownerDocument; 
     this.element 
      .addClass("ui-autocomplete-input") 
      .attr("autocomplete", "off") 
      // TODO verify these actually work as intended 
      .attr({ 
       role: "textbox", 
       "aria-autocomplete": "list", 
       "aria-haspopup": "true" 
      }) 
      .bind("keydown.autocomplete", function(event) { 
       if (self.options.disabled) { 
        return; 
       } 

       var keyCode = $.ui.keyCode; 
       switch(event.keyCode) { 
       case keyCode.PAGE_UP: 
        self._move("previousPage", event); 
        break; 
       case keyCode.PAGE_DOWN: 
        self._move("nextPage", event); 
        break; 
       case keyCode.UP: 
        self._move("previous", event); 
        // prevent moving cursor to beginning of text field in some browsers 
        event.preventDefault(); 
        break; 
       case keyCode.DOWN: 
        self._move("next", event); 
        // prevent moving cursor to end of text field in some browsers 
        event.preventDefault(); 
        break; 
       case keyCode.ENTER: 
       case keyCode.NUMPAD_ENTER: 
        // when menu is open or has focus 
        if (self.menu.element.is(":visible")) { 
         event.preventDefault(); 
        } 
        //passthrough - ENTER and TAB both select the current element 
       case keyCode.TAB: 
        if (!self.menu.active) { 
         return; 
        } 
        self.menu.select(event); 
        break; 
       case keyCode.ESCAPE: 
        self.element.val(self.term); 
        self.close(event); 
        break; 
       default: 
        // keypress is triggered before the input value is changed 
        clearTimeout(self.searching); 
        self.searching = setTimeout(function() { 
         // only search if the value has changed 
         if (self.term != self.element.val()) { 
          self.selectedItem = null; 
          self.search(null, event); 
         } 
        }, self.options.delay); 
        break; 
       } 
      }) 
      .bind("focus.autocomplete", function() { 
       if (self.options.disabled) { 
        return; 
       } 

       self.selectedItem = null; 
       self.previous = self.element.val(); 
      }) 
      .bind("blur.autocomplete", function(event) { 
       if (self.options.disabled) { 
        return; 
       } 

       clearTimeout(self.searching); 
       // clicks on the menu (or a button to trigger a search) will cause a blur event 
       self.closing = setTimeout(function() { 
        self.close(event); 
        self._change(event); 
       }, 150); 
      }); 
     this._initSource(); 
     this.response = function() { 
      return self._response.apply(self, arguments); 
     }; 

      this.menu.element.hide();this.menu = $("<ul></ul>") 
      .addClass("ui-autocomplete") 
      .appendTo($(this.options.appendTo || "body", doc)[0]) 
      // prevent the close-on-blur in case of a "slow" click on the menu (long mousedown) 
      .mousedown(function(event) { 
       // clicking on the scrollbar causes focus to shift to the body 
       // but we can't detect a mouseup or a click immediately afterward 
       // so we have to track the next mousedown and close the menu if 
       // the user clicks somewhere outside of the autocomplete 
       var menuElement = self.menu.element[ 0 ]; 
       if (event.target === menuElement) { 
        setTimeout(function() { 
         $(document).one('mousedown', function(event) { 
          if (event.target !== self.element[ 0 ] && 
           event.target !== menuElement && 
           !$.ui.contains(menuElement, event.target)) { 
           self.close(); 
          } 
         }); 
        }, 1); 
       } 

       // use another timeout to make sure the blur-event-handler on the input was already triggered 
       setTimeout(function() { 
        clearTimeout(self.closing); 
       }, 13); 
      }) 
      .menu({ 
       focus: function(event, ui) { 
        var item = ui.item.data("item.autocomplete"); 
        if (false !== self._trigger("focus", null, { item: item })) { 
         // use value to match what will end up in the input, if it was a key event 
         if (/^key/.test(event.originalEvent.type)) { 
          self.element.val(item.value); 
         } 
        } 
       }, 
       selected: function(event, ui) { 
        var item = ui.item.data("item.autocomplete"), 
         previous = self.previous; 

        // only trigger when focus was lost (click on menu) 
        if (self.element[0] !== doc.activeElement) { 
         self.element.focus(); 
         self.previous = previous; 
        } 

        if (false !== self._trigger("select", event, { item: item })) { 
         self.element.val(item.value); 
        } 

        self.close(event); 
        self.selectedItem = item; 
       }, 
       blur: function(event, ui) { 
        // don't set the value of the text field if it's already correct 
        // this prevents moving the cursor unnecessarily 
        if (self.menu.element.is(":visible") && 
         (self.element.val() !== self.term)) { 
         self.element.val(self.term); 
        } 
       } 
      }) 
      .zIndex(this.element.zIndex() + 1) 
      // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781 
      .css({ top: 0, left: 0 }) 
      .hide() 
      .data("menu"); 
     if ($.fn.bgiframe) { 
      this.menu.element.bgiframe(); 
     } 
    }, 

    destroy: function() { 
     this.element 
      .removeClass("ui-autocomplete-input") 
      .removeAttr("autocomplete") 
      .removeAttr("role") 
      .removeAttr("aria-autocomplete") 
      .removeAttr("aria-haspopup"); 
     this.menu.element.remove(); 
     $.Widget.prototype.destroy.call(this); 
    }, 

回答

0

这段代码的意思是?我猜下面给出的代码不完整。

case keyCode.TAB: 
if (!self.menu.active) { 
return; 
} 
self.menu.select(event); 
break; 

建议:检查你的萤火虫控制台,如果有任何一种JavaScript错误,它会显示在那里。

+0

使用现有的代码。亲爱的,不知道。尝试替代解决方案来修复它,但尚未修复。 – user4956321