Prevent the tab key from exiting the input field and instead direct it to a designated element on the webpage

I have customized a select menu for user interaction, but I am facing issues with normal keyboard behaviors not working as expected.

Specifically, I want to enable tab functionality to navigate to my styled select menu just like when clicking tab to cycle through inputs on a page. How can I achieve this? Below is the CSS styling I have applied to my menu:

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

/* Additional CSS styles */
.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}
... (CSS code continues)

and jQuery …

    $(function() {

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

});

// JavaScript function for styling the select menu
function styleSelectMenu(selectMenu)
{
    // Functionality for styling the select menu
    ...
 }       // clickListItem

You can find an example Fiddle here — http://jsfiddle.net/cwzjL2uw/2/. Any suggestions on how I can implement tab selection for my stylized menu?

jqueryhtmlcssjquery-ui

Answer №1

If you're looking to start, try something along these lines:

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

updated jsFiddle example

References (keyup vs keydown):

Detecting TAB key press with keyup

Keyup event behavior on tab

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement dynamic comment display similar to Stack Overflow using Asp.net and Jquery?

I have created a small web application using Asp.net and C#. Currently, I am able to retrieve comments by refreshing the entire page. However, I would like to achieve this functionality without having to do a full refresh. For instance Let's say the ...

javascriptjqueryasp.net.netangularjs

Issue with Click Event in jQuery Image Gallery

I am trying to implement an image loading functionality where #photo_1 will slide down once the image in its corresponding div is loaded. Subsequently, when #thumb_2 (and others) are clicked on, their respective images like #photo_2 should appear. Current ...

jqueryonclickslidedown

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...

javascriptjquerycsshtml

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

htmlcss

Adding data to a URL using jQuery Ajax

I'm currently working on implementing Ajax with jQuery and I have a specific requirement to add data to the URL. Take a look at the code snippet below: var my_website= mysamplesite.com/viewData/"; function displayData(myData) { $.ajax({ t ...

javascriptjqueryajax

I'm having trouble getting my CSS and HTML to connect properly, and I'm not sure what the issue is

Hi there, I'm having some trouble with my HTML code. I haven't even started building my website because I can't seem to connect it to the CSS file, and I have no idea why. I'm using Aptana Studio 3 by the way. <head> <titl ...

htmlcss

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

javascriptjquerycss

Steps to transfer the content of a label when the onclick event occurs

Seeking advice on how to send the dynamically varying value of a label upon clicking an anchor tag. Can anyone recommend the best approach to passing the label value to a JavaScript function when the anchor is clicked? Here is a sample code snippet: < ...

javascriptjqueryhtmlajax

``I am having trouble getting the Bootstrap carousel to start

I am having trouble getting the Bootstrap Carousel to function as expected. Despite including all the necessary code, such as initializing the carousel in jQuery.ready, the images are stacking on top of each other with navigation arrows below them instea ...

javascriptjqueryhtmltwitter-bootstrap

Leverage jQuery to extract data from this JSON object

It seems like this should be a simple task! I'm currently working on submitting a form using jQuery/ajax, and the success output I receive is in the form of a JSON string as shown below: {"activities-tracker-steps":[{"dateTime":"2016-09-06","value": ...

jqueryjson

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

"Upon completing an AJAX file upload, both $_POST and $_FILES arrays are found

Recently, I've delved into the realm of web development and encountered a hurdle with ajax file uploading... My current setup involves two HTML input fields: one for files and another for a button. <input type="file" name="Frame" id=" ...

javascriptphpjqueryajax

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

Tips for prefixing all URLs with "#!" for use in AJAX requests

I am working on an Ajax site and I need to add "#!" before all internal URLs from my site when a visitor clicks on them (external URLs should be unaffected). For example, clicking on a URL will change it to . I have tried writing a jQuery script for this ...

jqueryajaxurl

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

javascriptjqueryhtmlcssjquery-mobile

Mall magnitude miscalculation

I am currently experiencing an issue with Galleria and the Flickr plugin. Some images are displaying correctly, while others appear scaled and parts of them are cut off. How can I fix this problem? Below is the HTML code for the Galleria gallery on my web ...

javascriptjqueryhtmldrupalgalleria

Passing PHP information into a JavaScript array

I am facing an issue with my PHP file where I am fetching data from a MySQL database and storing it in a PHP array. I am then trying to output this data as a JS array but for some reason, I am unable to access the JS variable in my JS files. Here is the c ...

javascriptphpjqueryajax

Jquery Timer that can be toggled on and off with a single button

I'm really struggling to find a way to make this work smoothly without any bugs. The button in the code below is supposed to perform three actions: Initiate a countdown when clicked (working) Stop the countdown automatically and reset itself when it ...

javascripthtmljquery

Horizontal alignment of Inline Block Elements is not achieved

Having trouble with the alignment of a form on a test site? Check out the form located under the div#search-bar. If you inspect the element, I have applied the following CSS: div.nf-field-container { width: 201px; display: inline-block; margin: ...

csswordpressinput