Backspace event on Chrome mobile - javascript

This Meteor event acts as expected when running on disk top chrome but acts bad on mobile chrome.
plese see comments in the code below, How can I get the condition evt.which != 8 to evaluate to false when the backspace key is hit regardless of the browser?
thx
Template.input.events({
'keyup input[name=email]': function (evt, template) {
if (evt.which === 13) { // Enter key is pressed
//do stuff
}
}
else if (evt.which != 8) {
// backspace button evaluates to false on desktop chrome
// but evaluests to true on Android chrome.
}
}
});

Most desktop computers don't have a backspace key, they have a delete key. The key code for the delete key is 46. Try changing your else if clause to the following:
else if (evt.which !== 8 && evt.which !== 46) {
//should fall through to here if not backspace or delete key
}

Related

Change focus on value inserted

My problem: I have to focus on the next text input after that a char is inserted. This input can contain only one character, specifically a number.
My solution (pseudo-code):
onKeyUp="nextInput.focus()"
... works good on desktop but on mobile, sometimes the value is written after moving on the next fields (in the wrong cell).
My second solution:
onChange="nextInput.focus()"
doesn't work because the onchange event is called only if the HTML element lost his focus.
It seems working in my safari, iphone:
$("#first").on('keyup', function(e){
if(isCharacterKeyPress(e)){
$("#second").focus();
console.log(e);
}
});
function isCharacterKeyPress(evt) {
if (typeof evt.which == "undefined") {
// This is IE, which only fires keypress events for printable keys
return true;
} else if (typeof evt.which == "number" && evt.which > 0) {
// In other browsers except old versions of WebKit, evt.which is
// only greater than zero if the keypress is a printable key.
// We need to filter out backspace and ctrl/alt/meta key combinations
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
}
return false;
}
Please, Check this: https://jsfiddle.net/9u9hb839/4/
EDITED:
in order to prevent to detect other keys press rather than a char, I updated my code:
var keypressed = false;
$("#first").on('keyup', function(e){
console.log('keyup');
if(keypressed){
$("#second").focus();
}
keypressed = false;
});
$("#first").on('keypress', function(e){
console.log('keypress');
keypressed = isCharacterKeyPress(e);
});
function isCharacterKeyPress(evt) {
if (typeof evt.which == "undefined") {
// This is IE, which only fires keypress events for printable keys
return true;
} else if (typeof evt.which == "number" && evt.which > 0) {
// In other browsers except old versions of WebKit, evt.which is
// only greater than zero if the keypress is a printable key.
// We need to filter out backspace and ctrl/alt/meta key combinations
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
}
return false;
}
Try this: https://jsfiddle.net/9u9hb839/9/
Tested in mobile(safari, chrome) and desktop (chrome, firefox)
The only solution I found, that works also in mobile environment:
function moveFocus(evt, id) {
setTimeout(function () {
document.getElementById(id).focus();
document.getElementById(id).select();
}, 100);
}

Cannot catch enter button on Virtual keyboard of HTC phones

Currently, I am using HTML, js with phonegap to write an Android application. This is the function I use to catch the enter button on the virtual keyboard:
function handleFormKeypress(e)
{
var currentInputElement = $(e.target);
if(e.keyCode == 13 || e.keyCode == 10)
{
Log("handleFormKeypress - Go pressed")
//this needs to be checks as passing in the 'submitButton' is optional
if (e.data != undefined)
{
if (e.data.handler != undefined)
{
e.data.handler();
}
}
currentInputElement.blur();
e.stopImmediatePropagation();
return false;
}
}
As you can see, I catch the keycode of the keyboard. Converting to Android app using Phonegap, it should catch the Go button, or the Next button of the Virtual keyboard.
My input field's type is number:
<input type="number" id="blah blah blah"/>
In this situation, the android virtual keyboard display an numberic keyboard with the next button.
I tested on several Android phones. When I click to the next button, it jump to the next page as I expected. But on some HTC phones, in fact, the HTC Nexus One and the HTC One X, it does nothing.
Anybody has some ideas here?
Thanks in advance.
How about using both e.keyCode and e.which?
Add an inline if statement to check for both:
function handleFormKeypress(e)
{
var currentInputElement = $(e.target);
var keyCode = (e.keyCode ? e.keyCode : e.which);
if(keyCode == 13 || keyCode == 10)
{
Log("handleFormKeypress - Go pressed")
//this needs to be checks as passing in the 'submitButton' is optional
if (e.data != undefined)
{
if (e.data.handler != undefined)
{
e.data.handler();
}
}
currentInputElement.blur();
e.stopImmediatePropagation();
return false;
}

Keyboard shortcut ctrl+r not working for me

In the snippet below, Ctrl+Enter (event.which == 13) is working. However, Ctrl+R (event.which == 9) is not.
if ($('.selector')) {
$(document).keypress(function(event) {
if ( event.altKey && event.which == 13 ) {
$('.link a').trigger('click');
} else if ( event.altKey && event.which == 82 ) {
$('.link a').trigger('click');
} else {
return false;
}
});
}
The problem with your code is the keyPress listener behaves differently and uses a different set of keyCode. For keyPress the r key is 114 while for keyDown it is 82.
Also another problem is browser's default reload function will override your function because keypress is executed after you release the key. To solve this, change keypress to keydown.
$(document).keydown(function(e){
if(e.which === 82 && e.ctrlKey){ //keycode is 82 for keydown
alert("Pressed!");
e.preventDefault(); //stop browser from reloading
}
});
http://jsfiddle.net/DerekL/3P9NS/show
PS: It seems like Firefox is ignoring e.preventDefault (which by W3C standards it should). The best thing to do to support all browsers is to choose another combination, or use ctrl + alt + r.
if(e.which === 82 && e.ctrlKey && e.altKey){
Based on some quick testing at http://api.jquery.com/event.which/, it seems you want event.which == 82, not event.which == 9. Although most browsers tend to use Ctrl + R to refresh the page, so this might not be the best way to handle whatever you're doing.
A cross-Browser solution to prevent Ctrl+R refresh page:
LIVE DEMO (works in Firefox, Chrome, Safari, Opera)
var keyEv = navigator.userAgent.indexOf('Firefox')>-1?["keypress",114]:["keydown",82];
$(document)[keyEv[0]](function(e) {
if ( e.ctrlKey && e.which == keyEv[1] ){
e.preventDefault();
alert("CTRL+R");
}
});
By simply testing for our navigator.userAgent you can decide what Key event listener to use and the respective R key code.
If you need to handle both R and ENTER in combination with Ctrl than you just need this little tweak:
LIVE DEMO (again all browsers :) )
var keyEv = navigator.userAgent.indexOf('Firefox')>-1?["keypress",114]:["keydown",82];
$(document)[keyEv[0]](function(e) {
var k = e.which;
if ( e.ctrlKey && k==keyEv[1] || k==13 ){ // no XBrowser issues with 13(Enter)
// so go for it!
e.preventDefault();
alert("Do something here");
}
});

visualforce page javascript button click not working

I have a visualforce page (Salesforce) where I'm trying to capture the user pressing enter in a text field and firing a button click.
Here is my jquery code:
$(document).ready(function() {
$("#thisPage\\:theForm\\:siteNumber").keypress(function() {
if(window.event){
key = window.event.keyCode; //IE, chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
$("#thisPage\\:theForm\\:siteButton").click();
}
});
});
Its very odd, I've verified the key equals 13 and its entering the if statement. I've also tried moving the .click() action above the if key==13 condition and it fires fine. It just doesn't work inside the if key==13 condition I know its entering.
I've recreated what its basically doing in this simple fiddle, but of course it works fine: http://jsfiddle.net/2adPe/
Any help is appreciated!
UPDATE:
I've figured out that this will work
function noenter(e){
if(window.event){
key = window.event.keyCode; //IE, Chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
document.getElementById('thisPage:theForm:siteButton').click();
return false;
}
else{
return true;
}
}
with
onkeypress="return noenter(event)"
on the textbox. Is there a way to do this unobtrusively??
Try referencing your element IDs using the jQuery Attribute Ends With Selector.
Like this:
$("[id$='input1']").on("keypress",function(e) { // e is the current event
if(e){
key = e.keyCode; // IE, chrome
}
else{
key = e.which; // firefox
}
if(key == 13) {
e.preventDefault(); // prevent a form submit when pressing enter (on IE)
$("[id$='siteButton']").click(); // simulate a click of the siteButton
}
});
Also, you'll want to prevent the default action if the key == 13. Otherwise, the button click might be executed twice.
http://jsfiddle.net/2adPe/3/
Finally got it! I had to remove the e.preventdefault() from before the .click() and add return false at the end that stopped the default action from happening.
$('input[name$="siteNumber"]').keypress(function() {
if(window.event){
key = window.event.keyCode; //IE, chrome
}
else{
key = e.which; //firefox
}
if(key == 13) {
$('input[name$="siteButton"]').click();
return false;
}
});

JavaScript can't capture "SHIFT+TAB" combination

For whatever reason I can't capture "SHIFT+TAB" combination.
I am using the latest jQuery.
Same result if I use other ajax/javascript, etc.
Here is a simple example that should work as I currently understand it...
event.which or event.KeyCode are always "undefined" only shiftKey exists in a scenario involving a "SHIFT+TAB" or backward keyboard traversal, traditionally inherent in windows based apps/web or otherwise...
function ShiftTab()
{
debugger;
if(event.KeyCode == 9 && event.shiftKey) // neither this line nor the following work
// if (event.which == 9 && event.shiftKey) // shift + tab, traverse backwards, using keyboard
{
return true;
}
else
{
return false;
}
}
this seems to be yet another item related to tab order that no longer works as it traditionally worked in Microsoft.Net WinForm/WebForm based apps.
If you are using jQuery, this should be how the code is working. Make sure keyCode is lower case. Also, jQuery normalizes keyCode into which:
$(document).keyup(function (e) {
if (e.which === 9 && e.shiftKey) {
ShiftTab();
}
});
If you're into terse JavaScript:
$(document).keyup(function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
jQuery 1.7+ on syntax:
$(document).on('keyup', function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
I created a function which I wired up to my button's onkeydown event. I used onkeydown, because onkeypress would not capture my tab key press
function ShiftTab(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode; // for trans-browser compatibility
if (charCode === 9) {
if (e.shiftKey) {
$('#controlName').focus();
return false;
} else {
return true;
}
}
I took this approach to deal with two specific problems:
onkeypress would not capture tab key press
When click shift-tab, shift key press would trigger function, so I had nest the shiftkey modifier check
use same code inside keypress event.
the tab changes the element between keypress and keyup.
here we get event.key = tab and event.shiftKey = true.

Categories