I'm using the Bootstrap button plugin to render a list of checkboxes as buttons. This works great except for when "clicking" the buttons using the spacebar. The default behavior of the Bootstrap example when pressing space with the focus on one of the checkbox buttons is that the label receives the "active" class but the checkbox element doesn't actually get checked. I added the following javascript to programatically click the label when the spacebar is pressed. If I put an alert in there somewhere, even at the end of the handler, it works as expected. Without an alert the spacebar doesn't toggle the button state OR check the checkbox.
<script>
$(function() {
window.onkeydown = function(event) {
if(event.keyCode === 32 && $(event.target).hasClass('cabin-cb')) {
//alert('hi');
event.preventDefault();
//alert('hi');
$(event.target).closest('label').click();
//alert('hi');
}
};
});
</script>
Trigger the "click" event in something like a timeout handler so that it happens after the "keydown" event has run its course:
setTimeout(function() {
$(event.target).closest('label').click();
}, 1);
You could do it with Promise.resolve() or requestAnimationFrame() too; the point is to have the "click" happen once the keyboard processing has finished.
Related
From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.
If that field is part of the form, Done will trigger "onsubmit" event of the form.
One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.
Brief example in jQuery as an explanation:
var blurOccurred;
$("input")
.on("blur", function(evt) {
blurOccurred = window.setTimeout(function() {
alert('Done button clicked');
}, 10);
})
.on("focus", function(evt) {
window.clearTimeout(blurOccurred);
});
By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.
I'll hope this get you started.
Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).
When a user clicks a button out of a series of buttons, I'd like the browser to be able to detect which buttons are toggled as soon as they've clicked it.
Here's an example: http://jsfiddle.net/Uc6LV/11/
Try clicking "One" (nothing happens)
Now click "Two", it will display "one" (the previous one that was clicked
I changed the event listener from click to mouseup but it still seems to fire the event too early.
Any ideas?
In your event listener, I would listen for a "click" event and delay the actual calculation via setTimeout(). This works in your fiddle:
container.children[i].addEventListener("click", //click is better than mouseup
function(){
//let's delay execution until button is toggled
setTimeout(function() {
notice.innerHTML = toggled().toString(); }, 1);
})
From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.
If that field is part of the form, Done will trigger "onsubmit" event of the form.
One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.
Brief example in jQuery as an explanation:
var blurOccurred;
$("input")
.on("blur", function(evt) {
blurOccurred = window.setTimeout(function() {
alert('Done button clicked');
}, 10);
})
.on("focus", function(evt) {
window.clearTimeout(blurOccurred);
});
By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.
I'll hope this get you started.
Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).
I have a form. In it I have a textarea which expands when onclick.
But there is a little problem:
When the user tries to submit the form (click the submit button), the textarea jumps back to its normal size. This is because it uses the onblur function. I want to eliminate this awkwardness, because the user has to click the submit button twice to submit the form.
What should I do to make it work with one click?
You can set a short timeout in the onblur handler that shrinks the text area:
document.getElementById("textareaID").onblur = function () {
var target = this;
setTimeout( function () {
//Code to shrink the textarea, use "target" instead of "this" for scoping reasons.
}, 250);
}
textArea.addEventListener('blur', function(e) {
e.preventDefault();
return false;
}, true);
This will add a listener to the blur event which will prevent anything else from firing, including whatever it is that's causing the textarea to re-resize. It'd be easier for you to not add the blur hook in the first place, rather than catching it this way, though.
I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)
$('a.panel').click(function () {
};
I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:
if($(this).attr('href')=="#item2")
{
//do some processsing
}
and once the processing is done I use the scrollTo JQuery method to scroll to the next div
I need to have it that the user can press the enter key instead of clicking on the link.
Now the problem is:
a. I have several links on the same page that all need to have this behaviour.
b. I need to differentiate which link triggered the click event and do some server-side processing.
Is this possible at all?
I appreciate the quick and helpful responses!!Thanks a million for the help!
Focus + enter will trigger the click event, but only if the anchor has an href attribute (at least in some browsers, like latest Firefox). Works:
$('<a />').attr('href', '#anythingWillDo').on('click', function () {
alert('Has href so can be triggered via keyboard.');
// suppress hash update if desired
return false;
}).text('Works').appendTo('body');
Doesn't work (browser probably thinks there's no action to take):
$('<a />').on('click', function () {
alert('No href so can\'t be triggered via keyboard.');
}).text('Doesn\'t work').appendTo('body');
You can trigger() the click event of whichever element you want when the enter key is pressed. Example:
$(document).keypress(function(e) {
if ((e.keyCode || e.which) == 13) {
// Enter key pressed
$('a').trigger('click');
}
});
$('a').click(function(e) {
e.preventDefault();
// Link clicked
});
Demo: http://jsfiddle.net/eHXwz/1/
You'll just have to figure out which specific element to trigger the click on, but that depends on how/what you are doing. I will say that I don't really recommend this, but I will give you the benefit of the doubt.
A better option, in my opinion, would be to focus() the link that should be clicked instead, and let the user optionally press enter, which will fire the click event anyways.
I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain?
Just use $(element).focus(). But once again, you'll have to be more specific, and have a way to determine which element should receive focus, and when. Of course the user, may take an action that will cause the link to lose focus, like clicking somewhere else. I have no idea what your app does or acts like though, so just do what you think is best, but remember that users already expect a certain kind of behavior from their browsers and will likely not realize they need to press "enter" unless you tell them to.
If you do choose to use the "press enter" method instead of focusing the link, you'll likely want to bind() and unbind() the keypress function too, so it doesn't get called when you don't need it.
http://api.jquery.com/focus/
http://api.jquery.com/bind/
http://api.jquery.com/unbind/
Related:
Submitting a form on 'Enter' with jQuery?
jQuery Event Keypress: Which key was pressed?
Use e.target or this keyword to determine which link triggered the event.
$('a.panel').click(function (e) {
//e.target or this will give you the element which triggered this event.
};
$('a.panel').live('keyup', function (evt) {
var e = evt || event;
var code = e.keyCode || e.which;
if (code === 13) { // 13 is the js key code for Enter
$(e.target).trigger('click');
}
});
This will detect a key up event on any a.panel and if it was the enter key will then trigger the click event for the panel element that was focused.