Javascript keydown doesn't work in separate file - javascript

I have this code:
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==13) {
alert("You hit the enter key.");
} else {
alert("Oh no you didn't.");
}
}
if i paste it in the template it works fine, but if i put it in external file, it doesnt work. Although all other javascript in the external file works fine.I have also tried with this code:
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
but the same story. What am i doint wrong?

Seems like this answer covers your problem.
Shortly: it matters which moment you add eventListener to the document.
It should be applied on windows.onload

Related

Unable to get alt key press and alt key up both in angularjs js or jQuery

I need to update $scope.CtrlKeypressed value if user pressed alt key it is set to try if he release alt key then ift will be set false but I am stuck here on release. It is not working i am using following code. I unable to do this with angular then I code jQuery code for it but this is also not working
document.body.addEventListener('keydown', function (e) {
if (e.keyCode==18)
{
alert("Keydown")
$scope.ISCtrlPressed = true;
$scope.$apply();
}
});
document.body.addEventListener('keyup', function (e) {
$scope.ISCtrlPressed = false;
$scope.$apply();
});
Can someone guide me how I need to work for this?
Look at this codepen with your code modified. You will get into console the I was pressed message as long as you keep the key pressed and receive an alert when release the key. It also depends on your operating system and how you have configured the keyboard(number of repetitions if kept pressed).
http://codepen.io/TunderScripts/pen/YpxWLR?editors=0011#0
document.body.addEventListener('keydown', function(e) {
if (e.keyCode == 18) {
console.log('I was pressed');
}
});
document.body.addEventListener('keyup', function(e) {
alert('aaaa come back')
});
<script>
document.body.addEventListener('keydown', function (evt) {
if (evt.keyCode == 18)
{
alert("Keydown");
alert("Keyup");
}
});
</script>

keyboard shortcut using javascript not working

I am using command + h as a shortcut key in my website. It is not doing the function to be done. After I click something on the window only it works flawlessly. Here is my code..
window.onkeydown = function(event) {
if (event.keyCode == 72 && (event.metaKey == true)) {
//some function
}
}
Somebody try to rectify . I have included this code only after the dom gets loaded
window.onkeydown will only work if it is focused. So on body load you should set focus.
<body onload="setFocus()">
function setFocus(){
window.focus();
}
Working DEMO HERE
You could probably make it work with focusing the body on window load with document.body.focus() and attaching an event listener like this:
window.onload = function() {
document.body.focus();
document.addEventListener("keydown", keyDownFunction, false);
};
function keyDownFunction(event) {
if(event.keyCode == 72 && (event.metaKey == true)) {
alert("You hit the right keys.");
}
}

Call specific method in javascript when enter key pressed anywhere in page

I have to call a method when "enter" key is pressed anywhere in page but i don't want register any method call in each text box. I know it can be done by jQuery like this
$(document).keypress(function(e) {
if(e.which == 13) {
// enter pressed
}
});
Kindly tell me how can I write same version of this code in plain javascript?
Thanks in advance
Please try this
document.onkeypress = function (e) {
if (e.keyCode == 13) {
alert('cilcked')
}
}
DEMO
document.addEventListener("keydown", yourKeyDownFunction, false);
http://jsfiddle.net/9ZDxw/1/

Disable Backspace

I want to disable the Backspace button any time I click the browser page. I have written this piece of code (the second if is making sure that this would work for any version of IE - 11 or lower):
<PUBLIC:COMPONENT TAGNAME="menucontrol">
<PUBLIC:ATTACH EVENT="onclick" FOR="document" ONEVENT="RemoveBackspace();"/>
<SCRIPT language="javascript">
function RemoveBackspace() {
document.onkeydown = function (){
if(event.keyCode === 8) {
if(typeof event.preventDefault === 'function'){
event.preventDefault();
}
else{
event.returnValue = false;
}
}
};
}
</SCRIPT>
...
</PUBLIC:COMPONENT>
If I introduce an alert function in the RemoveBackspace() function, the message appears. I don't know what's wrong with this code. Should I use a different approach?
You forgot to pass the event to the function.
document.onkeydown = function (event){
if(event.keyCode === 8) {
event.preventDefault();
}
};
Look at the first line of my code. I also removed the unnecessary second if/else statement, as the code works fine without it. Don't worry, everyone makes mistakes like this at first. :P

Overwriting key events

How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});

Categories