This question already has answers here:
How to catch event.keyCode and change it to another keyCode?
(4 answers)
Closed 9 years ago.
I managed to catch the Enter keycode and prevent my page from Posting.
But I need to add another character in the place of Enter: keycode 39 to be exact.
How can I achieve this? This is my javascript. I see the alert firing but not the following function :(
Enter code
function CkKeyPress(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key == 13) {
CancelDefault(evt);
}
}
function CancelDefault(e) {
if (e.preventDefault) {
e.preventDefault();
alert('enter caught');
ReplaceEnterWithCharacter();
}
e.returnValue = false;
}
function ReplaceEnterWithCharacter() //this function doesnt work somehow
{
e = $.Event('keyup');
e.keyCode = 65; // A
$('input').trigger(e);
}
<asp:TextBox ID="txtSearch" runat="server" onkeypress="return CkKeyPress(event);"></asp:TextBox>
I've had some success with this kind of thing:
jQuery.event.trigger({ type : 'keypress', which : 65 });
Which triggers the keypress event at the current focus.
I don't think it's possible to change the value of the keycode on an event in mid-trigger, nor is it possible to trigger a keypress event on an arbitrary element even if it is an input or is actually the current focus.
Related
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');
}});
Which Javascript event is fired when someone presses the "return" key on an iPad in Safari while an input is selected.
I'm using an input element, but not surrounding it in <form> tags. I submit the $('#input').value() when $('#button').click() occurs. However, I'd like to also like to be able to submit when someone presses "return" on the iPad keyboard.
I was overzealous, here is the answer:
jQuery Event Keypress: Which key was pressed?
You can detect the enter key event in safari on ipad with following way :
<body onkeyup="yourFunction(event)">
then in javaScript
function yourFunction(event) {
var e;
if(event) {
e = event;
} else {
e = window.event;
}
if(e.which){
var keycode = e.which;
} else {
var keycode = e.keyCode;
}
if(keycode == 13) {
alert("do your stuff");
}
};
What about using a <form> tag and binding your handler to the submit tag.
$("#myForm").submit(function (event) {
doStuff();
});
It's cleaner and simpler.
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.
I'm just wondering if any of you done an onkeypress on a button.
my button is like this:
asp:Button ID="btnClear" runat="server" Text="Clear" onkeypress="return goToFirst();"/>
the javascript:
function goToFirst(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
alert(charCode);
if (charCode = 9 ) {
document.getElementById('txtFirstName').focus();
document.getElementById('txtFirstName').select();
}
return false;
My goal is to detect the tab keypress on a button and set the focus on the specified textbox when tab is pressed.
The problem is that the onkeypress event does not fire when tab key is pressed. other keys like numbers and letters fires the event, but not tab.
Is there a solution to my goal?
Thanks in advance!
use onkeydown. here's a demo
<input ID="btnClear" onkeydown="return goToFirst();"/>
.
function goToFirst(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
alert(charCode);
if (charCode == 9 ) {
document.getElementById('txtFirstName').focus();
document.getElementById('txtFirstName').select();
}
return false;
};
I solved a similar problem using ev.stopPropagation() and ev.preventDefault() after show the input.