I using a keypress event for enter and tab. But for some reason the code only runs with enter. By pressing tab it just does the default tab action and ignores the code. Please help.
onEnterAddWord: function(ev) {
var kc = ev.which || ev.keyCode;
if (kc === 13 || kc === 9) {
ev.preventDefault();
this.$el.find('.add-word-input input').trigger('blur');
this.$el.find('.viewbox').trigger('click');
console.log('check');
}
},
Try keydown instead of keypress
Modifier and non-printing keys does not fire the keypress event.
How about adding ev.stopImmediatePropagation(); which will prevent other eventListeners to fire?
Related
I have a handleBackspace function that does something if backspace is being pressed.
I tried this:
const handleBackspace = (e) => {
if(e.keyCode === 8) {
console.log('1')
}
}
//
<input onKeyPress={handleBackspace}>
But that doesn't work. (I tried it with keyCode 13 [enter] and it worked. But keyCode 8 [backspace] doesn't work) Can someone show me a solution?
As can be read here, onKeyPress only receives charCode instead of keyCode.
This gives us three possible answers to this issue:
Either change the event to onKeyDown
Change the listener to check e.charCode
Use e.which, which will work for both onKeyPress and onKeyDown.
onKeyDown detects keyCode events.
Try changing it to onKeyDown event.
Sandbox: https://codesandbox.io/s/react-basic-class-component-kzv2k?file=/src/index.js
handleBackspace = e => {
if (e.keyCode === 8) {
console.log("1");
}
};
render() {
return <input onKeyDown={this.handleBackspace} />;
}
The code below works for disabling the backspace key in a textarea in Firefox perfectly but not Chrome or Safari, any suggestions would be very much appreciated
$('#texttype').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '8'){
return false;
}
event.stopPropagation();
});
Why not use e.which, it's normalized in jQuery, and the keycode is an integer.
The keydown event triggers on any key press and gives a keycode in all browsers.
The keypress event triggers after keydown and does give a keycode, but it's only guaranteed for character keys, and does not fire on the backspace key in webkit.
$('#texttype').on('keydown', function(e) {
if ( e.which === 8 ) {
return false;
}
e.stopPropagation();
});
FIDDLE
I am using the below javascript to alert when the user presses delete, backspace and space inside a textbox. I need to alert if any key is pressed inside the textbox and probably I can mention the keycode in the script for each key. But can anyone tell me if there is any other way to alert when any key is pressed?
function doCheck() {
var keyCode = (event.which) ? event.which : event.keyCode;
if ((keyCode == 8) || (keyCode == 46) || (keyCode == 32))
alert('The column is readonly and is non-editable');
event.returnValue = false;
}
Can you try this, Event Handlers onkeypress
onkeypress="KeyPressCheck(event)"
Javascript:
function KeyPressCheck(event){
console.log('pressed::'+ event.keyCode);
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress
Use jQuery to attach the event, otherwise you will have to add on handler attributes to every element manually. Try this:
$('.texboxes').keypress(function(e) {
if ((e.which == 8) || (e.which == 46) || (e.which == 32)) {
alert('The column is readonly and is non-editable');
event.returnValue = false;
}
});
function doCheck(event)
and pass event where you are using this function
for eg.
onclick="doCheck(event)"
You can use JQuery Keyup Event handler to find which key is press.
$( "#SelectorId" ).keyup(function( event ) {
//check for which key is pressed.
if ((event.which== 8) || (event.which== 46) || (event.which== 32)){
alert("Some message");
event.preventDefault();
}
});
Why to use keyup event :
keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.
I need to know how to trigger an enter key on an input. That is, in response to some other event (not a keypress), I need to trigger a keypress of value 13.
(Clarification, I do not want to trigger some event when the enter key is pressed. If I didn't know how to do that, I could find that that's been asked and answered several times on SO. I want the reverse. I am trying to develop a workaround that requires I emulate an 'enter' keypress.)
You can do this -
var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);
http://api.jquery.com/category/events/event-object/
http://api.jquery.com/trigger/
var e = $.Event( "keyup", { keyCode: 13 } );
$('#yourInput').trigger(e);
Worked for me, instead of 'which', I used 'keyCode'
Simulate enter keypress
var e = jQuery.Event("keypress");
e.which = 13
e.keyCode = 13
$('#email').focus();
$('#email').trigger(e);
capture enter keypress
$('#email').keypress(function (e) {
if (e.which == '13') {
alert('code');
}});
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.