Overwriting key events - javascript

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;
}
});

Related

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/

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

Simulate multiple keypresses in javascript

I would like to simulate the user pressing tab then enter when they press enter. I know this sounds bad, but I have an asp.net web application that will only allow me to have one form with runat="server" on it so when the user hits return the main form gets submitted. I have another textbox on the page though (that ideally should have it's own form but can't because it is asp), and when enter is hit from there obviously the main form is submitted. The simplest way I could think is to simulate tab then enter using javascript, but I have been unsuccessful in that. I am welcome to any other solutions to this problem. So far I have simulated pressing tab, but I don't know how to simulate more than one keypress though.
Here is the code I have so far, I imagine return 9; needs to be replaced with something else. JQuery will also do.
function suppressEnter (e) {
var keyPressed;
if (window.event) { keyPressed = window.event.keyCode } // IE
else if (e) { keyPressed = e.which }; // Netscape
if (keyPressed == 13) {
return 9;
}
else {
return true;
}
}
EDIT: return 9 + 13; works in chrome, but not IE
Something like this would work:
function keyPress(e) {
if (e.which == 13) {
$(document).trigger(jQuery.Event('keydown', {which: 9}));
// do something
alert('Enter')
}
if (e.which == 9) {
// do something
alert('Tab');
}
};
$(document).bind("keydown", keyPress);
I've coded it up in a fiddle - http://jsfiddle.net/FAe6U/
Also With regards to #nnnnnn comment:
It seems to me you should just code that directly rather than trying
to simulate keystrokes.
Try this:
var tabPress;
function keyPress(e) {
if (e.which == 13) {
if (tabPress == 1){
e.preventDefault();
alert('tab and enter');
}
else{e.preventDefault(); alert('enter')}
}
else if (e.which == 9) {
e.preventDefault();
tabPress = 1;
};
};
function keyRelease(){tabPress = 0;}
$(document).bind("keydown", keyPress);
$(document).bind("keyup", keyRelease);
I've coded it up in a fiddle - http://jsfiddle.net/f4Ybn/

jQuery not detecting enter key pressed in textarea

My setup: jQuery 1.6.2
I have this HTML
<textarea class="comment_box"> Write a comment...</textarea>
And the following Javascript
<script>
$('.comment_box').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
</script>
When I press the enter key in the textarea, nothing triggers
EDIT Oops, cut and paste error, I do have $ in my code and it still doesn't work, must be something else going on.
My bad, it is a user operator error, it does work. Sorry for the confusion.
$('.comment_box').keypress(function(event) {
// Check the keyCode and if the user pressed Enter (code = 13)
if (event.keyCode == 13) {
alert('you pressed enter ^_^');
}
});
Thats it
Check out this answer:
jQuery Event Keypress: Which key was pressed?
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
For jQuery you need to use the $ to specify.
$('.comment_box').keyd
should do it.

Bind enter key to specific button on page

<input type="button" id="save_post" class="button" value="Post" style="cursor:pointer;"/>
How can I bind the enter key on the persons keyboard to this specific button on the page? It's not in a form, and nor do I want it to be.
Thanks!
This will click the button regardless of where the "Enter" happens on the page:
$(document).keypress(function(e){
if (e.which == 13){
$("#save_post").click();
}
});
If you want to use pure javascript :
document.onkeydown = function (e) {
e = e || window.event;
switch (e.which || e.keyCode) {
case 13 : //Your Code Here (13 is ascii code for 'ENTER')
break;
}
}
using jQuery :
$('body').on('keypress', 'input', function(args) {
if (args.keyCode == 13) {
$("#save_post").click();
return false;
}
});
Or to bind specific inputs to different buttons you can use selectors
$('body').on('keypress', '#MyInputId', function(args) {
if (args.keyCode == 13) {
$('#MyButtonId').click();
return false;
}
});
Vanilla JS version with listener:
window.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
alert('enter was pressed!');
}
});
Also don't forget to remove event listener, if this code is shared between the pages.
Maybe not quite what you're looking for but there is a HTML property that lets you assign a specific button called an access key to focus or trigger an element. It's like this:
<a href='https://www.google.com' accesskey='h'>
This can be done with most elements.
Here's the catch: it doesn't always work. for IE and chrome, you need to be holding alt as well. On firefox, you need to be holding alt and shift (and control if on mac). For safari, you need to be holding control and alt. On opera 15+ you need alt, before 12.1 you need shift and esc.
Source: W3Schools

Categories