Choosing from a range of triggers and extracting information from an object

Question

Choosing from a range of triggers and extracting information from an object

I'm in the process of developing a user-friendly method for selecting the trigger key that activates the code. This is what I have so far.

var triggers = {space:"32",enter:"13",tab:"9"};
var triggerKeys = ["space","enter"];

$('input').on('keypress',function(event) {
 var unicode= event.keyCode ? event.keyCode : event.which;
   if(unicode === triggers[triggerKeys]) {
       //code initiation here
   }

However, this current setup isn't functioning as intended. Any suggestions on how I can modify it so that the code is activated when any of the keys in the triggerKeys array are pressed, especially if there are multiple trigger keys?

Currently, the code only works for one trigger key. Should I use a loop to accommodate multiple trigger keys?

javascript arrays object keypress

Answer 1

Answer №1

Unsure of your specific inquiry, but a possible solution could involve the following approach :

$('input').on('keypress',function(e) {
    switch (e.which) {
        case 32: //space
            console.log('space');
            break;
        case 13: //enter
            console.log('enter');
            break;
        case 9: //tab
            console.log('tab');
    }
});

It appears using an array as a key for another array has posed challenges in my experience?

If you simply want to verify if a key exists in an array, consider storing the keycodes :

var triggerKeys = [32, 13, 9];

$('input').on('keypress',function(e) {
    if ( $.inArray(e.which, triggerKeys) != -1 ) {
       // one of the triggerkeys was pressed
    }
});

MODIFICATION:

Below is an alternative example utilizing the map you're employing, and validating if a trigger key was pressed :

var triggerKeys = ["space","enter", "tab"];
var triggers    = {space: 32, enter: 13, tab: 9};

$('input').on('keypress',function(e) {
    var arr = $.map(triggerKeys, function(el, i) {return triggers[el];});
    if ( $.inArray( e.which, arr ) != -1 ) {
        console.log('trigger key pressed')
    }
});

FIDDLE

Answer 2

Unsure of your specific inquiry, but a possible solution could involve the following approach :

$('input').on('keypress',function(e) {
    switch (e.which) {
        case 32: //space
            console.log('space');
            break;
        case 13: //enter
            console.log('enter');
            break;
        case 9: //tab
            console.log('tab');
    }
});

It appears using an array as a key for another array has posed challenges in my experience?

If you simply want to verify if a key exists in an array, consider storing the keycodes :

var triggerKeys = [32, 13, 9];

$('input').on('keypress',function(e) {
    if ( $.inArray(e.which, triggerKeys) != -1 ) {
       // one of the triggerkeys was pressed
    }
});

MODIFICATION:

Below is an alternative example utilizing the map you're employing, and validating if a trigger key was pressed :

var triggerKeys = ["space","enter", "tab"];
var triggers    = {space: 32, enter: 13, tab: 9};

$('input').on('keypress',function(e) {
    var arr = $.map(triggerKeys, function(el, i) {return triggers[el];});
    if ( $.inArray( e.which, arr ) != -1 ) {
        console.log('trigger key pressed')
    }
});

FIDDLE

Answer 3

Answer №2

If you need to execute certain code based on the value of the variable unicode, one way is to check for the presence of that value in a set.

An easy method is to use an array to create your set:

var triggerKeys = [32, 13];

You can then check like this:

if (triggerKeys.indexOf(unicode) >= 0) {
    // ...
}

However, keep in mind that not all browsers may support indexOf. As an alternative, you can simulate a set using:

var triggerKeys = {32: true, 13: true};

and then simply do:

if (unicode in triggerKeys) {
    // ...
}

UPDATE

To make your code more readable, you can define key names and key codes as follows:

var triggers = {space: 32, enter: 13, tab: 9};
var triggerKeys = ["space", "enter"];

The actual trigger key codes can be computed from the triggers object:

var triggers = {space:"32",enter:"13",tab:"9"};
var triggerKeys = ["space", "enter"];
var triggerKeyCodes = {};

for (var i = 0; i < triggerKeys.length; i += 1) {
    triggerKeyCodes[triggers[triggerKeys[i]]] = true;
}

This will result in the triggerKeyCodes object looking like {32:true, 13:true}. You can then check like this:

if (unicode in triggerKeyCodes) {
    // ...
}

View demo here: http://jsbin.com/eqoyag/5/edit

Considering you are already using jQuery, adeneo's solution might be more efficient. The future versions of JavaScript promise cleaner alternatives with features such as comprehensions and maps.

Answer 4

If you need to execute certain code based on the value of the variable unicode, one way is to check for the presence of that value in a set.

An easy method is to use an array to create your set:

var triggerKeys = [32, 13];

You can then check like this:

if (triggerKeys.indexOf(unicode) >= 0) {
    // ...
}

However, keep in mind that not all browsers may support indexOf. As an alternative, you can simulate a set using:

var triggerKeys = {32: true, 13: true};

and then simply do:

if (unicode in triggerKeys) {
    // ...
}

UPDATE

To make your code more readable, you can define key names and key codes as follows:

var triggers = {space: 32, enter: 13, tab: 9};
var triggerKeys = ["space", "enter"];

The actual trigger key codes can be computed from the triggers object:

var triggers = {space:"32",enter:"13",tab:"9"};
var triggerKeys = ["space", "enter"];
var triggerKeyCodes = {};

for (var i = 0; i < triggerKeys.length; i += 1) {
    triggerKeyCodes[triggers[triggerKeys[i]]] = true;
}

This will result in the triggerKeyCodes object looking like {32:true, 13:true}. You can then check like this:

if (unicode in triggerKeyCodes) {
    // ...
}

View demo here: http://jsbin.com/eqoyag/5/edit

Considering you are already using jQuery, adeneo's solution might be more efficient. The future versions of JavaScript promise cleaner alternatives with features such as comprehensions and maps.

Choosing from a range of triggers and extracting information from an object

Answer №1

Answer №2

Similar questions

PHP script not being triggered by Ajax upload

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

Breaking the Boundaries of Fuzzy Search with JavaScript

Activate menu on click

Interdependent function calls between two functions

Ways to process files and verify data correctness?

Struggling to understand the concept of JavaScript closures (such as, why is this loop not functioning correctly?)

Use the Jquery .one method to target elements sharing a common class

Boosting Performance in Three.js - Achieving a Faster Frame Rate

Calculations in JavaScript determined by responses provided in the form

Creating objects that are a fraction of another's width

Creating a PictureBox name using a string - here's how!

Retrieve the google+ user profile in a node application by solely utilizing the access token

AngularJS Dropdown in ASP.NET MVC 3

Why am I unable to access all elements within the map function?

Utilize $or or $and for incorporating multiple conditions in a match statement

Populate a Textbox Automatically using a Dropdown List

Tips for displaying the property of an array of objects in a template

JavaScript is struggling to interpret the JSON string

Best practices for customizing v-calender in vue.js