Trap the tab key in input field and move to a specific element on the page

Question

I want to create a styled select menu that the user can interact with. Although I styled it, I can't get normal keyboard behaviors to work with it.

Specifically, I need to tab to my select menu just as you can normally click tab and cycle through inputs on your page. How do I do this? I have styled my menu with the following CSS:

.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}

/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

/* line 85, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
/* line 94, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}
/* line 104, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:hover {
  background-color: #7b7b7b;
}
/* line 107, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active, .select-styled.active {
  background-color: #737373;
}
/* line 109, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active:after, .select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

/* line 116, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}
/* line 128, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
/* line 134, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options li:hover {
  color: gray;
  background: #fff;
}
/* line 138, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options li[rel="hide"] {
  display: none;
}

/* line 144, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

and jQuery …

    $(function() {

        $('select').each(function(){
            styleSelectMenu($(this));
        });

});

// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;

                /*** NEW - start ***/
                var $paddingCalculator = $('<div />', {
                'class' : "select-styled test"
    }).css({
                width : 0,
        visibility : "hidden"
    }).appendTo("body");
    $this.addClass('select-hidden');
    var paddingWidth = $paddingCalculator.outerWidth() + 10;
    $paddingCalculator.remove();

    if ( !$this.parent().hasClass('select') ) {
                var $wrapper = $("<div />", {
                        'class' : "select"
        }).css({
                        width   : selectWidth
        });
        $this.wrap( $wrapper );
    }   // if

                /*** NEW - end ***/

    if ( !$this.next().hasClass('select-styled') ) {
        $this.after('<div class="select-styled"></div>');
    }    // if

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    if ( $styledSelect.parent().find('ul').length > 0 ) {
        $styledSelect.parent().find('ul').remove();
    }   // if
    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    // This is the event when someone opens the list
    $styledSelect.unbind('click')
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    // This is the event when someone actually selects something from the list
    $listItems.unbind('click.selectStyledItem')
    $listItems.bind('click.selectStyledItem', function(event) {
         clickListItem(event, $styledSelect, $this, $(this), $list);
    });

    $(document).click(function(event) {
        $styledSelect.removeClass('active');
        $list.hide();
    });


    var selectedIndex = $this[0].selectedIndex;
    if (selectedIndex > 0) {
        var name = $this.attr("name")
        var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
        selectItemFromStyledList($styledSelect, $this, selectedText, $list);
    }   // if

}

// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide)
{
    $(styledSelect).text(selectedText).removeClass('active');
    $(selectMenu).val($(selectMenu).attr('rel'));
    $(listToHide).hide();
    // Select option in the underlying list so that the form gets submitted
    // with the right values
    selectedOption = $(selectMenu).find("option").filter(function () { return $(this).html() == selectedText; });
    $(selectMenu).find("option[selected='selected']").removeAttr("selected");
    $(selectedOption).attr("selected","selected");
}       // selectItemFromStyledList

function clickListItem(event, styledSelect, selectMenu, listItemClicked, list)
{
        var $styledSelect = $(styledSelect);
        var $selectMenu = $(selectMenu);
        var $listItem = $(listItemClicked);
        var $list = $(list);

        event.stopPropagation();
        var selectedText = $listItem.text();
        selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
 }       // clickListItem

An example Fiddle is here — http://jsfiddle.net/cwzjL2uw/2/ . Any ideas how I can set up clicking tab so that it selects my stylized menu?

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

Something like this might get you started:

$('input[name=field2]').on({
    "keydown": function(e){
        if (e.which==9){
            $('div.select-styled').focus().click();
        }
    }
});

revised jsFiddle

Sources _{(keyup vs keydown)}:

Catching TAB key press with keyup

Keyup event behavior on tab

edited May 23 '17 at 12:08

Community

1
1

answered Dec 29 '16 at 22:06

cssyphus

37,875
18
96
111

Trap the tab key in input field and move to a specific element on the page

1 Answers1