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/
Related
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.
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.
Currently I use the following code to allow the user to "flip through" content on my web app:
$(this).keyup(function(e) {
if(e.which == 37) {
document.location = $("#prev_button").attr('href');
}else if(e.which == 39) {
document.location = $("#next_button").attr('href');
}
});
The problem is that if the user is in the search form at the top of the page, I do not want the arrow keys to redirect the page (instead they should act as they normally would without the functionality, i.e. allow the text cursor to move around the text).
the form id is "searchForm" - can I add a clause to the the if statement which evaluates to false if the search form is selected?
You can stop the propagation of the event when in the textbox so the event doesn't make it to your other handler:
$('#searchbox').keyup(function(e) {
e.stopPropagation();
});
I would use something like: Demo
$(this).keyup(function(e) {
if(~['input', 'textarea'].indexOf(e.target.tagName.toLowerCase())) return;
if(e.which == 37) {
document.location = $("#prev_button").attr('href');
}else if(e.which == 39) {
document.location = $("#next_button").attr('href');
}
});
This way you can exclude all <input> and <textarea> elements.
IMO, excluding just #searchbox isn't a great solution because in the future you may change its id or include other text fields, but forget you must reflect changes in the exclusion script.
Check out this thread :)
Find if a textbox is currently selected
function checkFocus() {
if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
//Something's selected
return true;
}
}
<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 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;
}
});