I would like to call a function when the tab key is pressed within any field with the name="notes".
I tried the following but this doesn't fire (using IE 9). What do I have to change here to make this work at least in IE 8 and IE 9 ?
$('input[name=notes]').keypress(function(e) {
var code = e.keyCode || e.which;
if (code === 9) {
e.preventDefault();
myFunction();
}
});
The problem I think is in the type of event you're trying to listen to.
The keypress event is triggered when a char gets written into an input text, while tab key doesn't insert any character. It just blurs the input. Read more here.
You might be looking for the keydown event instead.
Have a look at this fiddle. Would it help to get you started?
JS
$('input[name=notes]').keydown(function(e) {
var code = e.keyCode || e.which;
if (code === 9) {
e.preventDefault();
myFunction();
alert('it works!');
}
});
Related
I have an input field on my results page. I used the following event:
onkeypress="if (event.keyCode == 13) {document.getElementById('results-search').click()}"
The problem is that when I perform a search, nothing happens when I click the search button. It does not work when I click or press enter neither. This occurs only on Mozilla Firefox and Microsoft Edge, but works fine on Google Chrome. Please help
event.keyCode property may not be supported in some browsers. Try to use event.keyCode || event.which instead:
onkeypress="if ((event.keyCode || event.which) == 13) {document.getElementById('results-search').click()}"
If you use jQuery it doesn't matter if you use keyCode or which property, both of them will work. You added jquery tag, but you didn't use it in your code.
BTW. isn't it better to handle button's click event as well? In my opinion it would look more elegant. It's also good to separate JavaScript code from HTML.
document.getElementById('input-search').onkeypress = function(e)
{
if ((e.which || e.keyCode) === 13)
search();
};
document.getElementById('results-search').onclick = search;
function search()
{
//do something...
}
This question already has answers here:
Pressing spacebar scrolls page down?
(3 answers)
Closed 9 years ago.
I want to disable the scroll down when i pressed the spacebar. This only happens in firefox.
I already use overflow:hidden and meta tag viewport.
Thanks.
This should do the trick. It states that when the spacebar is pressed on the page/document it doesn't just prevent its default behavior, but reverts back to original state.
return false seems to include preventDefault. Source
Check JQuery API's for more information about keydown events - http://api.jquery.com/keydown/
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
JQuery example
$(document).keydown(function(e) {
if (e.which == 32) {
return false;
}
});
EDIT:
As #amber-de-black stated "the above code will block pressing space key on HTML inputs". To fix this you e.target where exactly you want spacebar blocked. This can prevent the spacebar blocking other elements like HTML inputs.
In this case we specify the spacebar along with the body target. This will prevent inputs being blocked.
window.onkeydown = function(e) {
if (e.keyCode == 32 && e.target == document.body) {
e.preventDefault();
}
};
NOTE: If you're using JQuery use e.which instead of e.keyCode Source.
The event.which property normalizes event.keyCode and event.charCode
JQuery acts as a normalizer for a variety of events. If that comes to a surprise to anyone reading this. I recommend reading their Event Object documentation.
Detect if the spacebar is being pressed. If it is, then prevent its default behaviour.
document.documentElement.addEventListener('keydown', function (e) {
if ( ( e.keycode || e.which ) == 32) {
e.preventDefault();
}
}, false);
Have you tried capturing the keydown event in javascript? If you are using jQuery you can read more about capturing key events here:
http://api.jquery.com/keydown/
If you aren't you can capture and ignore the space bar keypress as described here:
https://stackoverflow.com/a/2343597/1019092
I have the code blow for tabbing through 2 fields and it has no effect in IE and Chrome, it seems it runs nothing (for example I get nothing when I put alert) and in Firefox it runs with some bug (it jumps twice there) where do you think the problem is, I'm developing in by ASP.Net and jQuery version 1.3.2
$(document).ready(function () {
$("#TextBox1").keypress(function (e) {
var kCode = e.keyCode || e.charCode;
if (kCode == 9) {
$("#TextBox2").focus();
}
});
});
I think the main problem is that you're using the keypress event, which should only be fired when a character is added to the input, not when any key (like TAB) is pressed.
To handle other key presses you will need to use keydown. However, testing that in your fiddle seems to still not work. To make it work (in Chrome at least), I had to prevent the default action:
$(document).ready(function () {
$("#TextBox1").keydown(function (e) {
e.preventDefault();
var kCode = e.keyCode || e.charCode;
console.log(kCode);
if (kCode == 9) {
$("#TextBox2").focus();
}
});
});
Here's an update fiddle. However, if I've understood your question correctly, all you're trying to do is change the focused element when the tab key is pressed... if that's right, why not just use the tabindex attribute instead?
The keypress event does not fire for tab (keycode 9). You'll need to use keyup or keydown.
If this is ASP.NET, you need to reference the controls by the ClientID:
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").keypress(function (e) {
var kCode = e.keyCode || e.charCode;
if (kCode == 9) {
$("#<%=TextBox2.ClientID%>").focus();
}
});
});
I am new to javascript; thus, it question may seem to be naive. I have a simple jQuery function as
$(document).ready(function(){
$('#txtValue').keyup(function(){
sendValue($(this).val());
});
});
This sends immediately when a letter is typed in
I explored jQuery events, but I was unable to find an event for ENTER. I want to run the function when I typed all letters and pressed ENTER.
Check the keyCode property of the event object. 13 represents the Enter key:
$('#txtValue').keyup(function(e){
if(e.keyCode === 13) {
sendValue($(this).val());
}
});
The keyup event will fire every time a key is released. There is no way to selectively fire the event, but you can choose when to handle it!
Edit
It's actually better to use event.which, to deal with all browsers, as jQuery normalises the event object to help.
There isn't an event for an individual key, you'll need to bind the keypress event and see if the keyCode is the Enter key (13):
$('#txtValue').keypress(function(e) {
if (e.keyCode == 13) {
//do stuff
e.preventDefault();
e.stopPropagation();
//-or-
//return false;
}
});
there's no event for ENTER you have to check every key and then if evt.keycode == 13 you have an ENTER
Hope this helps
You just need to add some logic to your event handler to check to see which key triggered the event:
$(function(){
$('#txtValue').keyup(function(event){
if(event.which == 13){
// enter was pressed
}
});
});
For some reason this script isn't working in Firefox:
document.onkeydown=function keypress(e) {
if (e.keyCode == 27) {
window.location = "/edit"
};
};
It works fine in Chrome, but for some reason it's not working in Firefox.
Basically, what it does is load the /edit page when you press the escape key.
use:
document.onkeydown=function keypress(e) {
e=(e||window.event);
if (e.keyCode == 27) {
try{e.preventDefault();}//Non-IE
catch(x){e.returnValue=false;}//IE
window.location = "/edit";
};
}
The default-action for ESC is to stop loading the page,
so you must prevent from this behaviour, otherwise you cannot change the location.
Fiddle: http://jsfiddle.net/doktormolle/CsqgE/ (Click into the result-frame first before using ESC)
But however, you really should use another key.
A user expects that the loading of the current page stops if he uses ESC , nothing else.
The event handler is working for me: http://jsfiddle.net/Tm2PZ/
I suspect the lcoation you're setting is not valid.
Try setting window.location.href instead.
if you don't use 'Escape keyup or Escape keydown' for other things in your code, you can use 'keyup' to replace keypress**
document.body.addEventListener( 'keyup', function (e) {
e=(e||window.event);
if (e.key == "Escape") {
console.log('escape is pressed');
}
},false );
e.keyCode is depreciate, use e.key, add "console.log(e.key)" in your listener if you want to get key name
it is better, because it adapts to the keyboard which does not have the same composition and e.keyCode does not adapt