javascript - 默认选项卡导航在 Mozilla 中不起作用

标签 javascript jquery html css

在 Mozilla Firefox 浏览器中,Tab 按钮的正常导航卡在该文本框上。在 Tab 键上按下它不会移动到下一个元素。在 IE 和 Chrome 中工作正常。谁能帮我解决这个问题?

 <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 );
    },

最佳答案

这段代码是什么意思?我想下面给出的代码并不完整。

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

建议:检查你的 firebug 控制台,如果有任何类型的 JavaScript 错误,它会显示在那里。

关于javascript - 默认选项卡导航在 Mozilla 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31245899/

相关文章:

javascript - 从自定义列表中获取对应的值

javascript - 滚动到 anchor ,同时保留哈希值

php - 使用 AJAX 从表单发送图像

javascript - 点击图片即可在jquery中显示其对应的Div

javascript - firebase firestore - 如何检查 catch 中的错误

javascript - 如何让 slider 在几秒钟后改变幻灯片?

javascript - 我是否在此字符限制计数器中实现了正确的 if 语句?

javascript - 无法在 Bootstrap 5 中使用 JavaScript 打开 Modal

javascript - 如何将整数附加到 url 脚本内联 thymeleaf?

javascript - 如何将了解更多链接直接指向选项卡?