We Keep Coding

Give keycode 2 different functions

I am using code to make the spacebar do something for an HTML 5 game. It works great, but the page that displays the game also has a Search Box, and visitors will not be able to use the spacebar properly in the Search Box on that page.
Below is the the code I am using for the spacebar on the game's page.
The Search Box is input type search, so I was wondering if a function could be make for :search, to revert the spacebar to work correctly inside the Search Box.
var hit = document.getElementById("hit");
document.onkeydown = function(e)
{
if (e.keyCode == 32)
{
e.preventDefault();
hit.click();
}
};
thanks

There are many ways you could do this, here's one:
var hit = document.getElementById("hit");
document.onkeydown = function(e) {
if (e.keyCode == 32) {
if (e.currentTarget.type === 'input') { //Or whatever check you want here
// Do things for your searchBox
return; //Prevent rest of the function from running
}
e.preventDefault();
hit.click();
}
};

Inside the above function you must check if the cursor is in your search box, and if it is then skip the rest of the function
Have rewritten your code as below, hope it helps
var hit = document.getElementById("hit");
document.onkeydown = function(e)
{
if (document.activeElement.nodeName != 'TEXTAREA' && document.activeElement.nodeName != 'INPUT') {
if (e.keyCode == 32)
{
e.preventDefault();
hit.click();
}
}
};
Cheers mate!

You can stop the 'keydown' events from the search bar from propagating upwards by calling event.stopPropagation():
document.addEventListener('keydown', function(e) {
console.log('hit!');
e.preventDefault();
});
let search = document.getElementById("search");
search.addEventListener('keydown', function(e) {
console.log("search!");
e.stopPropagation();
});
<form id="search"><input name="query" type="text"><input type="submit" value="search"></form>

capturing enter key in select2

I'm using select2 to present an editable selectbox. When user writes a statement which does not appear in the list(select2, data), I show a button to add this statement to the list.
Forcing users to click the button seems to me a little bit frustration. Is it possible to capture enter key in select2? I want to make user able to add his/her new statements into the list just by pressing enter key.

$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
addToList($(this).val());
});

I'm using Select2 4.0.3 and this works form me:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});

I am using Select2 4.0. This works for me;
$('.select2-search__field').on('keyup', function (e) {
if (e.keyCode === 13)
{
alert('Enter key');
}
});

None of these worked in Select2 4.0.6-rc1, but this did:
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
It's detailed in the manual here.

This code can help you with class-based selections:
$('.select2-selection').on('keyup', function(e) {
var YOUR_SELECT2_CUSTOM_CLASS = $(this).attr('aria-labelledby').includes('YOUR_SELECT2_CUSTOM_CLASS')
if (YOUR_SELECT2_CUSTOM_CLASS && e.keyCode === 13) {
alert($(".YOUR_SELECT2_CUSTOM_CLASS").val())
}
});
Or you can use this:
$("YOUR_CUSTOM_CLASS").bind("change keypress", function() {
if (window.event.keyCode === 13) {
alert("Enter Captured")
}
})

If legacy select2 is used (some 3.5.4), then this option can be used:
$('#mySelect2').on('select2-selected', function (e) {
console.log(e.params);
// keypress enter script
});
It helped me a lot.
If you have two select2s on the page, then this is a great option!

After preventing the default behavior the enter key seems to be refreshing the global variables in java script

I am writing a search function much like the [cmd+f] function in a browser. I have everything working but I want the enter key on press to cycle through the results through the page. I also have arrow buttons that call the function I wrote and they work. I prevented the default behavior of enter using:
$('form').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
I am using this code to call the function on enter:
$('form').keyup(function (event) {
if (event.keyCode == 13) {
nextSearch();
}
});
It works for the first result but I think it resets the global variable I use to mark the place. The only logical answer I can think of is that pressing enter now refreshes the JavaScript. Is there a way to prevent this?
I use these global variables to keep track:
window.luCurrentNumber = 0;
window.luLastActive = 0;

If I understand you corrected, you the arrow keys and the enter keys to tab instead of performing their default. Here is an example of a function that I use to treat the Enter key as a tab, which I wrote because users kept hitting the enter key and accidentally submitting the page.
//Make enter key is pressed, tab instead of submitting.
$('body').on('keydown', 'input, select', function (e) {
var self = $(this)
, form = self.parents('form:eq(0)')
, focusable
, next
;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button').filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
Though it's not exactly what you are trying to do, I think it should set you on the right path.

Simulate multiple keypresses in javascript

I would like to simulate the user pressing tab then enter when they press enter. I know this sounds bad, but I have an asp.net web application that will only allow me to have one form with runat="server" on it so when the user hits return the main form gets submitted. I have another textbox on the page though (that ideally should have it's own form but can't because it is asp), and when enter is hit from there obviously the main form is submitted. The simplest way I could think is to simulate tab then enter using javascript, but I have been unsuccessful in that. I am welcome to any other solutions to this problem. So far I have simulated pressing tab, but I don't know how to simulate more than one keypress though.
Here is the code I have so far, I imagine return 9; needs to be replaced with something else. JQuery will also do.
function suppressEnter (e) {
var keyPressed;
if (window.event) { keyPressed = window.event.keyCode } // IE
else if (e) { keyPressed = e.which }; // Netscape
if (keyPressed == 13) {
return 9;
}
else {
return true;
}
}
EDIT: return 9 + 13; works in chrome, but not IE

Something like this would work:
function keyPress(e) {
if (e.which == 13) {
$(document).trigger(jQuery.Event('keydown', {which: 9}));
// do something
alert('Enter')
}
if (e.which == 9) {
// do something
alert('Tab');
}
};
$(document).bind("keydown", keyPress);
I've coded it up in a fiddle - http://jsfiddle.net/FAe6U/
Also With regards to #nnnnnn comment:
It seems to me you should just code that directly rather than trying
to simulate keystrokes.
Try this:
var tabPress;
function keyPress(e) {
if (e.which == 13) {
if (tabPress == 1){
e.preventDefault();
alert('tab and enter');
}
else{e.preventDefault(); alert('enter')}
}
else if (e.which == 9) {
e.preventDefault();
tabPress = 1;
};
};
function keyRelease(){tabPress = 0;}
$(document).bind("keydown", keyPress);
$(document).bind("keyup", keyRelease);
I've coded it up in a fiddle - http://jsfiddle.net/f4Ybn/

Form submit on keyCode == "enter" (13)

I need to submit the content of a form when I press the Enter key, but only if the form has no error message. I built up the following function:
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (e.keyCode == 13 && mess.length > 0) {
e.preventDefault();
e.stopPropagation();
}
if (mess.length == 0 && e.keyCode == 13) $(targetFormID).submit();
});
In this function the mess variable is getting the error message returned by function error_m, the rest is simple code condtion but it doesn't work.
Need some help with this!!

Submitting the form when the Enter key is pressed is default browser behaviour. Don't mess with it. Just validate the form in the submit event.
$(targetFormID).submit(function (e) {
var mess = error_m(targetDiv);
if (mess.length > 0) {
e.preventDefault();
}
});
One other possible problem: what is targetFormID? If it's actually a string containing an element ID, you'll need
$("#" + targetFormID).submit(/* Same function as above */);
If it's a reference to the form element then $(targetFormID) is fine but your variable is misleadingly named.