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
Related
I'm using contenteditable on my website (and JS/JQuery). I have a limit (maxlength) of 160 letters in it. When it comes to 160, function addOnTypeKeyDown() fires (when typing) e.preventDefault(), but this function prevent Ctrl+C, prevent mouse selection, prevent Ctrl+A as long as I click backspace (so e.preventDefault() isn't working).
My question is how can I "switch on" options like above (Ctrl+C and so on...) without letting user type letters.
I know that I can use input or textarea, but I'm asking how can I solve this problem using contenteditable?
I used e.which for Ctrl+C and mouse events, but that didn't work.
Function looks like that:
function addOnTypeKeyDown(event){
var cntMaxLength = parseInt($(this).attr('maxlength'));
event = event || window.event;
if ($(this).text().length >= cntMaxLength) {
if(!(event.which==8))
{
event.preventDefault();
$(this).parent().find("#error").css("display", "block");
}
}
else{
$(this).parent().find("#error").css("display", "none");
}
}
Thanks for your time and effort.
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!');
}
});
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();
}
});
});
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
This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 6 years ago.
I am trying to prevent the enter key from being put into a textarea, but it doesn't seem to work.
$('#comment').keyup(function(event) {
if (event.text.charCodeAt() == '10') {
event.preventDefault();
}
});
I have written little demonstration on jsfiddle.net, where you can try this code
Everybody has right answer :)
$('#comment').keypress(function (event) {
if (event.keyCode === 10 || event.keyCode === 13) {
event.preventDefault();
}
});
You can't cancel a keyup event. You can cancel keydown and keypress events though. In the documentation, notice that under "Event Information", "Cancels" is "No" for keyup:
keyup
keydown
keypress
Using keydown allows you to cancel far more keys than keypress, but if you don't want to cancel until after the key has been lifted, keypress is what you want. Fortunately for you, the enter key is one of the cancellable keys for the keypress event.
Use event.keyCode in the keydown event:
$('#comment').keydown(function(event) {
if(event.keyCode == 13) return false;
//carry on...
});
$('#comment').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
While the answers provided here will prevent someone from typing a carriage return, it will not prevent someone from pasting one in.
You would need to do some post processing of the text (in javascript or server-side) to remove them.
http://jsfiddle.net/we8Gm/
But the question is, why? Why not simply use <input type="text"></input> which takes care of this automatically as it is a single-line input element?
Try with .keypress and use return false;
Good luck!