Simulate press in a link using keystroke - javascript

Hello I have this link for example
<a href"http://google.es">Link</a>
Is there any way using Javascript or similar that when I press for example the number 5 in the keyboard It´s the same as if I press the link with the mouse?
Thanks

you can use jQuery
$( document ).keypress(function( event ) {
event.charCode == 53 ? window.open("google.es","_self") : console.log('another key');
});

You can bind keypress event and sniff out the event.which and when the appropriate key is pressed you can programmatically click the a or link element.
Check this CodePen for the example.
Note: This example is using jQuery plugin.

Try this. Using jQuery.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function checkKey(e) {
var code;
if (e.keyCode) code = e.keyCode;
if (code == 53) { // replace the 53 with the keycode of your choice.
$('#myLink').trigger("click");
}
}
</script>
</head>
<body onkeydown="checkKey(event);">
<button id="myLink" onclick="window.location.href= 'https://google.com'">Link</button>
</body>
</html>
Keycode reference: http://www.foreui.com/articles/Key_Code_Table.htm

you can use the key press event in jquery
$(function() {
$(document).keypress(function(e) {
if (e.which === 53){
location.href = "http://google.es";
}
});
});
this is for the key 5 if you want to change key give asci value for that key

Related

How to run javascript on keypress without an input field?

I'm writing a simple web site and would like to run some simple javascript when the user presses a button on their keyboard. Something as simple as running alert("Hello!"); or showing a modal box when the user presses enter would do.
After searching for a good while, I've only been able to find solutions that work if the page contains an input text field. Is it possible without it?
Yes, it is possible to do so, and here's how you'd do it:
document.body.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
alert("Hello! You pressed the enter key!");
}
});
Yes, you can actually use eventListener for this. For example, check out this sample page.
<html>
<body>
<script>
document.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
alert('You just hit enter.');
}else if(event.keyCode ==65){
alert('You just press A.');
}else if(event.keyCode==97){
alert('You just hit a.');
}else{
alert('You press something other than A, a and ENTER key');
}
})
</script>
</body>
</html>
In order to get the keycode for the various keypress you can use this:
<html>
<body>
<p>Press a key on the keyboard in the input field to get the KeyCode for that key.</p>
<input type="text" size="40" onkeypress="getKeyCode(event)">
<p id="keyCode"></p>
<script>
function getKeyCode(event) {
var x = event.which || event.keyCode;
document.getElementById("keyCode").innerHTML = "The keyCode is: " + x;
}
</script>
</body>
</html>

On Enter fire javascript function

After reading this post here in Stackoverflow, (Detect the Enter key in an text input field) I tried to make a few of my inputs fire on enter... I did not work. I made a simple example and it still doesn't work. Can someone hint as to the proper way? (FYI - Definitely a newbie here)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>On Enter</title>
<script src="../../Scripts/jquery-2.1.0.min.js"></script>
<script>
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
</script>
</head>
<body>
<input type="text"
id="input1"
placeholder="Press Enter When Done">
</input>
</body>
</html>
Thanks
First you need to say #input1 other than .input1, then run it when the entire DOM is ready:
$(document).ready(function(){
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
});
Edit: As #jfriend00 mentioned in a comment it's a good idea to use e.which other than e.keycode. To do so you can change: e.keyCode == 13 to e.which == 13. This way is recommenced by the people at jQuery, as it normalizes e.keyCode and e.charCode.
Change the .input1 in your JS to #input1
When you use . it means it's a class, but you have an ID, which is #.
Your code is triggering a "class", not an "id", so add a "#" instead of a "." in input1:
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
first, like the previous answer your criteria is not good. change for ID
second, put your javascript at the and of the file on in the ready document.
Because the javascript is in execution while the documenta as not finish to load . So the event can't be add to an element that doesnt exist.

Execute function when particular key is pressed if textbox has focus

I want to focus on a textbox which is located down in a webpage when a user presses the down key.
I know that I can do it by using the following code:-
if ( e.keyCode === 40 ) { // 40 is down key
// I m stuck here
}
Now, I am stuck in what to code in the body region. How to bring focus to the textbox whose id is "abc" for example. Any help will be appreciated. Thanks in advance
UPDATE
I tried this :-http://jsfiddle.net/9qAqM/ (helped by #iBlue)
$(document).ready(function(){
$("#xyz").keypress(function(e){
if ( e.which === 40 ) {
$('#abc').focus();
}
}) ;
});
Still, its not working
try this piece of code
$('#abc').focus();
or
document.getElementById('abc').focus();
UPDATE::
As per your code, since you are trying to detect the down arrow keys they are not detected by keypress event.They are detected by keydown event.So if you modify your code as per the below code it would work
$(document).ready(function(){
$("#xyz").keydown(function(e){
if ( e.which == 40 ) {
$('#abc').focus();
}
}) ;
});
Here is the working jsfiddle for your code
Check out the updated fiddle at http://jsfiddle.net/9qAqM/2/.
$('#xyz').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#abc').focus();
}
});
If you are using jQuery try this:
if ($("#IdOfYourTextBox").is(':focus')) {
alert("TextBox is focused!");
}

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

How can I capture keyboard events are from which keys?

I googled and got the following codes on the Net.However, when I press a keyboard key,it is not displaying me an alert box. I want to get which character I have pressed in the alert box. How do I fix this?
<script type="text/javascript">
var charfield=document.getElementById("char")
charfield.onkeydown=function(e){
var e=window.event || e;
alert(e.keyCode);
}
</script>
</head>
<body id="char">
</body>
</html>
If you want to get the character typed, you must use the keypress event rather than the keydown event. Something like the following:
var charfield = document.getElementById("char");
charfield.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode > 0) {
alert("Typed character: " + String.fromCharCode(charCode));
}
};
try this jquery code
$("body").keypress(function(e){
alert(e.which);
});
I can't off the top of my head think of a good situation in which to use the "on some event" method of a DOM element to deal with events on that element.
The best practice is to use addEventListener (or attachEvent in older versions of Internet Explorer) like so:
charfield.addEventListener('keydown', function (e) { alert(e.keyCode); }, false);
If you want to account for attachEvent as well:
(function (useListen) {
if (useListen) {
charfield.addEventListener('keydown', alertKeyCode, false);
} else {
charfield.attachEvent('onkeydown', alertKeyCode);
}
})(charfield.addEventListener);
function alertKeyCode(e) {
alert(e.keyCode);
}
You'll get the appropriate key code:
charfield.onkeydown=function(evt){
var keyCode = (evt.which?evt.which:(evt.keyCode?evt.keyCode:0))
alert(keyCode);
}

Categories