I am trying to read an article but I a am bored of pressing the hyperlink "next page" and tried to run the code below.
(what is the code for : Pressing enter will find the hyperlink of class "x-hidden-focus") and click it.
The code written below worked by clicking a button when pressing enterKey for another webpage, yet it didn't work with a hyperlink .I tried to run the code that is commented but neither codes fixed my problem.
The class of the hyperlink I want to press is ".x-hidden-focus"
This is the link to the article.
$(document).keypress(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
//$(".x-hidden-focus")[0].click();
$(".x-hidden-focus").click();
}
});
NOTE: I am using this code as a userscript in tampermonkey (Hope this helps).
You could try to simply navigate to to the href described by the link you are trying to click:
document.location = $("a.x-hidden-focus").attr("href")
Which with your code would become :
$(document).keypress(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
document.location = $("a.x-hidden-focus").attr("href");
}
});
Based on the article you have provided we can see that the html for the button you are trying to click is the following:
Next
However if you do press next we can see that there is now 2 buttons :
Previous
Next</p>
And now your code would be :
$(document).keypress(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
document.location = $("a.x-hidden-focus:contains('Next')").attr("href");
}
});
EDIT
My assumptions that the class was already present on the element was wrong.
Since the class is only added after you hover the link you would need to find the link only based on the text:
$("a:contains('Next')");
You could however be more precise by using the container class:
$("div.step-by-step").find("a:contains('Next')").attr("href")
The button on the documentation page is dynamically created and the class doesn't exist on it unless you click/hover it. You will need to select the button by
$('a:contains("Next")')
then get the first one of the resulting three links and take its href
$('a:contains("Next")').eq(0).attr('href')
Now you can set the location
document.location = $('a:contains("Next")').eq(0).attr('href')
$(document).keypress(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
document.location = $('a:contains("Next")').eq(0).attr('href')
}
});
Just need to add listener for click event like this:
$(document).on('keypress', function(e) {
if (e.keyCode === 13) {
$('.x-link').click();
}
$('.x-link').on('click', function() {
let url = $(this).attr('href')
window.open(url)
})
})
Here is example
As #bambam said You have to select the Link first by:
`$('a:contains("Next")')`
Then navigate to the href described by the link by:
$('a:contains("Next")').eq(0).attr('href')
And you can do the same for the Previous link.Your Final code would be:
$(document).keydown(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
document.location = $('a:contains("Next")').eq(0).attr('href')
}
else if(which == '16'){
document.location = $('a:contains("Previous")').eq(0).attr('href')
}
});
When you press Enter Keycode:13 you go to the next page.
When you press Shift Keycode: 16 you go to the previous page.
Related
I've created a set of radio buttons using bootstrap and now I need to do a check to determine which button is active (To determine what string to use later in my project).
Currently I'm just trying to get an alert to appear for debugging:
$(document).ready(function() {
var rg_eu = document.getElementById('option1');
$('#searchplayer1').keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if(keycode == '13') {
if($(document.getElementById('option1')).hasClass('active')) {
alert(rg_eu);
}
}
});
});
However my alert doesn't appear. Also tried checking with 'focus' and 'btn btn-secondary active' - but nothing seemed to work. Do I have to do this in some unconventional manner because it's done through bootstrap?
Bootstrap applies the active class to the label, not the button itself.
Here is one way to check the button:
$(document).ready(function() {
$('#searchplayer1').keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if(keycode == '13') {
if($('#option1').is(':checked')) {
alert('option checked');
}
}
});
});
there is a selector in jquery which gives you the checked radio button in a particular radio group:
if(jQuery("input[name="option1"]:checked"))
{
alert('radio is active');
}
other methods ,
1. $('#option1').is(':checked')
2. $('#option1').prop('checked')
Refer the following link
https://api.jquery.com/checked-selector/
I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.
Below is the code I was trying.But no matter everytime code is 0.
$('#tbprofession').on('focus', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('Tabbed');
}
else
{
alert('Not tabbed');
}
});
This code does not work.
Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.
Anyone can show me some light?
You can try something like that :
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});
fiddle : https://jsfiddle.net/xc847mrp/
You can use keyup event instead:
$('#tbprofession').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
console.log('I was tabbed!', code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>
You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger.
Or just keep the last key.
Or a boolean saying if the last key pressed was a TAB or not.
And on focus you can look at that variable.
In my webpage i have to trap TAB key pressure and then simulate mousedown event for the object involved.
I tried so:
$('*').keydown(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
var elementClicked = e.target.nodeName;
elementClicked.mousedown();
}
});
but error
Uncaught TypeError: undefined is not a function
on elementClicked.mousedown(); row appears.
How can i simulate and call the mousedown event on element involved in TAB pressure??
Thanks in advance
AM
$(this).trigger('mousedown') or just $(this).click() and this will trigger whatever event is bound to that element. note that you should do *... that's super bad for performance.
Try:
$(document).on('keydown.tab', '*', function(e){
if( e.keyCode == 9 ){
$(this).trigger('mousedown');
}
return false;
});
But you can't really know on which element was the TAB clicked...
UPDATE:
you should first give all elements the attribute tabindex, only then those element could be tracked when pressing the tab key, because they have focus (by clicking on them first or focusing via keyboard) :
$('body *').each(function(i){
this.setAttribute('tabindex',i);
});
DEMO PAGE - only the h1 element simulates click using TAB
elementClicked is an object name and not an object -
select object using jquery:
$(elementClicked).mousedown()
May be you should try below updated code:
$(document).on("keyup", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
var elementClicked = $(this);
elementClicked.trigger("mousedown");
}
});
Hope this helps!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Keyboard shortcuts with jQuery
I want to display a popover window using a shortcut key instead of clicking the icon on the toolbar.
Do you have any good idea?
Thank you for your help.
Abody97's answer tells you how to determine if a certain key combo has been pressed. If you're not sure how to get that key combo to show the popover, this is what you need. Unfortunately, Safari makes this needlessly complicated.
In the global script, you'll need a function like the following to show a popover, given its ID and the ID of the toolbar item that should show it:
function showPopover(toolbarItemId, popoverId) {
var toolbarItem = safari.extension.toolbarItems.filter(function (button) {
return button.identifier == toolbarItemId && button.browserWindow == safari.application.activeBrowserWindow;
})[0];
var popover = safari.extension.popovers.filter(function (popover) {
return popover.identifier == popoverId;
})[0];
toolbarItem.popover = popover;
toolbarItem.showPopover();
}
You'll also need code to call this function in your global script's message listener, like the following (this sample does not assume you already have a message listener in place):
safari.application.addEventListener('message', function (e) {
if (e.name == 'Show Popover') {
showPopover(e.message.toolbarItemId, e.message.popoverId);
}
}, false);
Finally, in your injected script, the function that listens for the key combo needs to call dispatchMessage, as below:
safari.self.tab.dispatchMessage('Show Popover', {
toolbarItemId : 'my_pretty_toolbar_item',
popoverId : 'my_pretty_popover'
});
(Stick that in place of showPopUp() in Abody97's code sample.)
Note: If you only have one toolbar item and one popover (and never plan to add more), then it becomes much simpler. Assuming you've already assigned the popover to the toolbar item in Extension Builder, you can just use
safari.extension.toolbarItems[0].showPopover();
in place of the call to showPopover in the global message listener, and omit the message value in the call to dispatchMessage in the injected script.
Assuming your shortcut is Ctrl + H for instance, this should do:
var ctrlDown = false;
$(document).keydown(function(e) {
if(e.keyCode == 17) ctrlDown = true;
}).keyup(function(e) {
if(e.keyCode == 17) ctrlDown = false;
});
$(document).keydown(function(e) {
if(ctrlDown && e.keyCode == 72) showPopUp(); //72 is for h
});
Here's a reference for JavaScript keyCodes: little link.
Here's a little demo: little link. (It uses Ctrl + M to avoid browser-hotkey conflicts).
I believe this could help you: http://api.jquery.com/keypress/
In the following example, you check if "return/enter" is pressed (which has the number 13).
$("#whatever").keypress(function(event) {
if( event.which == 13 ) {
alert("Return key was pressed!");
}
});
I'm trying to disable the backspace button on an order page in all cases except when a textarea or text input is an active element to prevent users from accidentally backing out of an order. I have it working fine in most browsers, but in IE (testing in IE9, both regular and compatibility mode) it still allows the user to hit the backspace and go to the previous page.
Here's the code:
$(document).keypress(function(e){
var activeNodeName=document.activeElement.nodeName;
var activeElType=document.activeElement.type;
if (e.keyCode==8 && activeNodeName != 'INPUT' && activeNodeName != 'TEXTAREA'){
return false;
} else {
if (e.keyCode==8 && activeNodeName=='INPUT' && activeElType != 'TEXT' && activeElType != 'text'){
return false;
}
}
});
Any advice on what I'm doing wrong here?
Thanks!
I think you're overcomplicating that. Rather than checking for an active element, find the event target instead. This should give you the information you need. It's also better to use keydown rather than keypress when there is no visible character. Finally, it's better to use e.preventDefault() for better granularity.
$(document).keydown(function(e) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.which === 8) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
NB I could have done this the other way round, rather than an empty if block and all the code going in the else block, but I think this is more readable.
Instead of keypress, try the keydown function, it will fire before the actual browser based hook. Also, putting in a preventDefault() function will assist in this. IE :
$(document).keydown(function(e){
e.preventDefault();
alert(e.keyCode);
});
Hope this helps.
The most Simple thing you can do is add the following one line in the very first script of you page at very first line
window.history.forward(1);
Most examples seem to be for the JQuery framework - Here an example for ExtJS
(I've been getting a lot of downvotes for this recently as the question now has JQuery tag on it, which it didn't previously. I can remove the answer if you like as isn't for JQuery but it's proven to help others not using that framework).
To use this add this code block to your code base, I recommend adding it inside the applications init function().
/**
* This disables the backspace key in all browsers by listening for it on the keydown press and completely
* preventing any actions if it is not which the event fired from is one of the extjs nodes that it should affect
*/
Ext.EventManager.on(window, 'keydown', function(e, t) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.getKey() == e.BACKSPACE) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
Use e.which instead of e.keyCode; jQuery normalizes this value across browsers.
http://api.jquery.com/keydown/
To determine which key was pressed,
examine the event object that is
passed to the handler function. While
browsers use differing properties to
store this information, jQuery
normalizes the .which property so you
can reliably use it to retrieve the
key code.
Then, use e.preventDefault(); to prevent the default behaviour of moving to the previous page.
<html>
<head>
<script type="text/javascript">
function stopKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 8) && (node.type!="text")) {return false;}
}
document.onkeypress = stopKey;
</script>
</head>
<body onkeydown="return stopKey()">
<form>
<input type="TEXTAREA" name="var1" >
<input type="TEXT" name="var2" >
</form>
</body>
</html
I had to add the onDownKey attribute to the body in order to get editing keys to go to the functions.
$(document).keydown(function(e) {
var elid = $(document.activeElement).is('input');
if (e.keyCode === 8 && !elid) {
return false;
}
});
Hope this might help you
Seems like the "backspace" will also act as "navigation back" if you have selected radio buttons, check-boxes and body of document as well. Really annoying for forms - especially when using post. All the form could be lost with one slip of the "backspace" key -_- ...
Honestly... who's idea was it to allow the "backspace as a navigational "back" button!!! really bad idea in my opinion.
I disable the "backspace" default on anything that is not a text area or text field - like this:
$(document).keydown(function(e){
console.log(e.keyCode+"\n");
var typeName = e.target.type;//typeName should end up being things like 'text', 'textarea', 'radio', 'undefined' etc.
console.log(typeName+"\n");
// Prevent Backspace as navigation backbutton
if(e.keyCode == 8 && typeName != "text" && typeName != "textarea"){
console.log("Prevent Backbutton as Navigation Back"+typeName+"\n");
e.preventDefault();
}
//
})
Not sure where else one would want the normal behavior of a back-button other than in these two areas.
document.onkeydown = KeyPress;
function KeyPress(e) {
if (!e.metaKey){
e.preventDefault();
}
}