We Keep Coding

Firefox issue when focusing textarea element in keypress event handler

The following snippet works great in chrome/edge/safari. In Firefox the textarea gets focused, but the pressed character isn't being added to the textarea - the first character will be always missing.
document.addEventListener('keypress', (event) => {
document.querySelector('#input').focus();
});
<textarea id="input"></textarea>
How can I make this behave consistently across all browsers?

Here's how you can make it work without browser sniffing: When the keypress happens, bind a handler to the input event on the textarea, and also set a 0-ms timeout.
If the browser accepted the pressed key for the textarea, the input handler will run before the timeout (because the input event fires synchronously). If that happens, you know the browser has handled the keypress correctly, and you can cancel the timeout.
Then, if the timeout fires, you know that the input event hasn't fired and thus the character hasn't been added to the textarea, and you do it programmatically.
In both the event handler and the timeout handler, you unbind the event handler – it should run at most once (per key press).
var textarea = document.getElementById("input");
document.addEventListener("keypress", function (event) {
if (event.target === textarea) {
return;
}
var eventHandler = function () {
textarea.removeEventListener("input", eventHandler);
clearTimeout(timeoutId);
console.log("input event");
}
var timeoutHandler = function () {
var character = ("char" in event) ? event.char : String.fromCharCode(event.charCode);
textarea.value += character;
textarea.removeEventListener("input", eventHandler);
console.log("timeout fired");
}
timeoutId = setTimeout(timeoutHandler, 1);
textarea.addEventListener("input", eventHandler);
textarea.focus();
});
<textarea id="input"></textarea>
<p style="background: #ccc">
<b>Click here</b> to make sure the document is focused, but the textarea is not. Then press a key.
</p>
If you try the above snippet in Firefox, the console will say "timeout fired". In all other browsers it will say "input event". In either case, your pressed key is added to the textarea.
Some notes:
Technically, for consistent behavior you'd need to do more than just append the character to the end; you'd also have to look at things like cursor position and text selection. This may be overkill however.
If you need to support really old browsers, you might want to do a feature check for availability of the input event.
If you have other code that relies on the textarea changing synchronously upon keypress, you'll probably have to make updates there.

While this code will not work if any other browsers share the same behavior as Firefox, the following code will add any key input, given that it is a character whose string length is 1, when the code is run on Firefox:
var mozFocused = false;
document.addEventListener('keypress', (event) => {
document.querySelector('#input').focus();
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox && !mozFocused && event.key.length === 1) {
mozFocused = true;
document.querySelector('#input').value += event.key;
}
});
document.querySelector('#input').addEventListener('blur', (event) => {
mozFocused = false;
});
<textarea id="input"></textarea>
Again, note that this does not guarantee it to work across all browsers, as this was a fix for Firefox specifically, but, if you see the same behavior occurring in other browsers, I used the answer from this SO post to detect the current browser the client is using (assuming it is in the list of the browsers that this post discusses): How to detect Safari, Chrome, IE, Firefox and Opera browser?

Is it possible to use the keyboard to trigger a File Browser in JavaScript?

I have code that let my users open the File Browser of the client's browser so they can select a file.
That works fine when the user clicks a button with the mouse, but somehow it completely fails with the keyboard.
So I setup the button as follow:
var that = this,
upload_button = jQuery(".upload-button");
upload_button.click(function(e)
{
e.preventDefault();
e.stopPropagation();
// simulate a click on the hidden file-input button
that.upload(editor_widget);
});
I setup the keyboard as follow (the upload_button will get focus first, obviously):
upload_button.keypress(function(e)
{
if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
{
switch(e.which)
{
case 85: // [U]pload
case 13: // Enter
e.preventDefault();
e.stopPropagation();
// simulate a click on the hidden file-input Browse button
that.upload(editor_widget);
break;
}
}
});
Then the upload function looks like this:
....prototype.upload = function(editor_widget)
{
var upload_button = jQuery(".upload-button"),
upload_input_file = w.find(".file-input input");
// ignore clicks if the button does not exist
if(!upload_button.exists())
{
return;
}
// simulate a click on the file "Browse" button
//
upload_input_file.focus();
upload_input_file.click();
c.focus();
};
So, somehow the upload_input_file.click(); works fine when I click the button. It completely fails when I press U or <enter>...
I'm primarily testing in Firefox at the moment.

You can totally do this.
Register keyup event for document then trigger click to file browser button.
$(document).keyup(function (e) {
if (e.keyCode === 85) {
$(".upload-button").click();
}
});

Try substituting using .click() on DOM element for jQuery .click() on jQuery object
$(window).on("keydown", function(event) {
if (event.which === 13 || event.which === 85) {
event.preventDefault();
event.stopImmediatePropagation();
$("input")[0].click()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" />

As mentioned in the comments of the other two answers, I found something that will make the Enter (and eventually spacebar) work in Firefox, but not the U key.
The idea is to change the focus to the input of type file in keydown and thus let the normal Enter or Space keyup event do what it normally does.
upload_button.keydown(function(e)
{
if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
{
switch(e.which)
{
case 85: // [U]pload -- does not work in Firefox
case 13: // Enter
case 32: // Space
// we cannot simulate a click in this case, but we can
// change the focus and let the system manage the keyup
// event as normal... be sure to let the normal propagation
// of the event happen since that's where things
// actually happens. So all we do is:
upload_input_file.focus();
break;
}
}
});
I have not tested yet, I may have to manage the U key with the click() so it works as expected in other browsers.
Okay, I now also tested with IE and it works with the U key with the original code. The Space and Enter keys do not both work in IE so if you want to support both, that will require a test to know whether to handle those keys as in IE or as in Firefox...

keypress event not generated in chrome but works in ie and ff

This question has been asked plenty of times before, but no answers I have found seem to solve my problem.
From a classic asp page I call a Javascript function
on each of my pages. The point is to fire a search button when a user enters search text and presses enter, rather than clicking on the button, or choosing from the Ajax provided selections.
This works fine in IE and FF, as has been the case for every other question asked along these lines.
Here is the Javascript. Can anybody tell me please how to have it work for Chrome as well as IE and FF ?
Edited following answer form Alexander O'Mara below:
Altered function call in body tag on page to use onkeyup instead of onkeypress - onkeyup="KeyPress(event)"
Altered JS function (also after heeding comments re duplication from others - thanks) as follows:
function KeyPress(e)
{
var ev = e || window.event;
var key = ev.keyCode;
if(window.event) // IE
{
key = e.keyCode;
if (key == 13)
{
window.event.keyCode = 0;
$('#btnSearch').click();
}
}
else if (key == 13)
{
btnSearch.click();
ev.preventDefault();
}
}
It seems to work sometimes and not others, and rarely on chrome currently. Is there a guaranteed way to have it work all the time ?
The main page of my site if you want to try it yourself is www.dvdorchard.com.au, your cursor will be sitting in the search box on arrival - enter a word > 3 chars and press enter, if you stay on the page it didn't work, if you move to the productfound.asp page it worked.
Thanks again.

You are looking for the keyup event (documentation). The keypress event is not consistent across browsers. See this question for information on the differences.
Update:
Since you are using jQuery, you can also remove the onkeyup="KeyPress(event)" attribute for you body, and replace your KeyPress function with the following (replacing the contents with your event handling code).
$(window).keyup(function(e){
/*YOUR CODE HERE*/
});

if(e.keyCode)
{
key= e.keyCode;
}
else
{
key = e.charCode;
}
Fire your event with onkeyup
read more

this should work in chrome. I don't know about other browsers
function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
var key = code(e);
// do something with key
// done doing something with key
key=0
};
};

How to initiate a keyboard key click event in JavaScript?

Here I'm trying to override the default shortcuts of IE browser. I'm using IE8 for my application.
Let me give an example. I want to override a shortcut ALT+P. The default function of ALT+P in IE is "Open the Page menu". I tried doing the following way, but I'm not able to override it:
<script type="text/javascript">
document.onkeydown = printKeycode;
var isAlt = false;
function printKeycode(e)
{
//alert('11')
var keycodeentered = window.event.keyCode;
if(keycodeentered == 18)
{
isAlt=true;
}
if(keycodeentered == 80 && isAlt == true) // P keycode is 80
{
alert('Combination entered');
window.event.returnValue = false;
}
}
</script>
But I'm not able to override the default functionality. My action is being triggered at the same time the default action is happening. Small observation is, I am able to prevent the default action of shortcuts using CTRL combination. Any clue?

Have a look at this here:
Overriding Browser's Keyboard Shortcuts
or
Disable Internet Explorer shortcut keys
or
How can I disable Alt-Enter in IE?

Unable to capture Ctrl+Alt+Arrow key event in jQuery

For some strange reasons I can't capture Ctrl+Alt+Arrow key combination inside textarea. Is it some sort of system hotkey that is getting swallowed by Windows? Ctrl+Alt+Any Letter and Ctrl+Alt+Shift+Arrow are getting captured fine.
$(document).ready(function() {
$("textarea").bind("keydown", function(event) {
console.log(event);
if(event.altKey && event.ctrlKey && event.which == 38) {
console.log("ctrl+alt+up"); //never triggered
}
});
});
When Ctrl+Alt+Any Letter is pressed I see all 3 events in console. When Ctrl+Alt+Arrow is pressed I see only 2 events (for Ctrl and Alt).
Any ideas?

I've just checked your code and everything works just fine in IE8, Firefox and Chrome.
What browser are you using?
Have you tried using jquery hotkeys plugin ?