I have a text input on a page to which I have bound focus() and blur() events. I'm having an issue where focus and then blur are firing unexpectedly if I follow the these steps:
Click on input, focus() fires. OK.
Click out of window on another window, blur() fires. OK.
Click back on original window, focus() and then blur() on the input both fire. PROBLEM!
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
I really need the focus() and blur() events not to fire when the window regains focus as it causes a div to quickly appear and then disappear.
Any ideas on how to stop this?
I ended up getting around this by checking if the document has focus as part of my blur function.
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
if (document.hasFocus()) {
$('#passwordStrength').slideUp(500);
}
});
This means that my strength box stays on the page when clicking away and then behaves appropriately when clicking back into the window.
Thanks to the commenters for trying to help and sending me on the right path.
You can use window.onfocus to detect if the current tab is focused.
function focus () {
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
}
focus();
window.onfocus = function () {
$('#password').focus();
focus();
}
Here the fiddle
Related
I need to show my pop-up when the mouse leaves the <body>, this identifies an exit intention.
So when my clients are typing their emails, the popup just appears at the exact moment their pointer is over the suggestion and it should not have happened. But it happens because this part is not in the DOM, so it triggers the mouse leave
however, this event is triggered when the mouse is over a native input suggestion on browsers (I tested on Firefox and Chrome).
So, any ideas how can I skip this fake trigger?
document.body.onmouseleave = function(e) {
console.log("mouse leave was trigged")
}
Take a look what is happen:
I've encountered the same issue, solved it by looking at what exactly triggered the mouseleave event. So if it was not an input field from your form, you could proceed and show your popup
$('body').on('mouseleave', function (e) {
if ('INPUT' !== e.target.nodeName) {
// do your stuff
}
});
I have an action planned on a space bar click. It does happen.
// when space bar is pressed
do-something; // Applied on the $(document).keypress..
But, when I press space bar, along with the event/action that has to be triggered, modal load/shows up again. Why is it so? I have tried to prevent modal from loading again :
$('#goal').on('hidden.bs.modal',function() {
$(document).focus(); // Get the button that triggered modal
// out of focus
});
But the document, doesn't get focus and the button that triggered modal-load remains in focus until I click on the screen to bring the document back to focus. How could I prevent modal from loading again on space bar press?
I also tried the blur() function on button that triggers modal. But it doesn't help?
Using $(document).focus(); will have no effect, because document is not a focusable element, it's actually not an element at all. Try using document.activeElement to get the active element and blur it.
document.activeElement.blur();
To do this, you will need to listen for the event when the modal is closed, hidden.bs.modal, since Bootstrap will automatically return the focus to the button on close.
Example (Live):
$(document).on('hidden.bs.modal', function() {
document.activeElement.blur();
});
Alternately, you could set the focus to a focusable element in the model itself if one exists. This would probably give the most-pleasant user experience.
It might be due to default focus on an element which might be causing this. Tried event.preventDefault(); ?
// when space bar is pressed
event.preventDefault();
do-something; // Applied on the $(document).keypress..
This is a bit hard to answer without seeing more of your code or, even better, a jsfiddle that demonstrates your problem.
But in general, you can prevent the space bar keypress from having any side effects by returning false from the jquery event handler function to indicate that you've consumed the event.
So (guessing what your event handler looks like)
$('...').keypress( function(event) {
if ( event.which == 32 ) {
doSomething();
return false;
}
});
Hope this helps. If not, please give a bit more details.
You can avoid the button gaining focus this way:
$('#yourButtonId').focus(function(){
$(this).blur();
});
I tried this in the jsFiddle you posted and it works, the space bar doesn't open the modal anymore.
I'm trying to remove focus from a (jQuery Mobile) text input when a user switches tabs on desktop. While I can correctly identify the activeElement in the below console, I cannot edit any of its properties or remove its focus.
This is what I'm doing:
// inside some init method
window.onfocus = function () {
// triggers
console.log(document.activeElement);
if (document.activeElement.tagName !== "BODY") {
console.log("clear focus");
document.activeElement.blur();
document.activeElement.className = "FOOBAR";
}
};
When I'm on a form and focus a text input, then switch to another tab and go back to the tab with the form, the event listener triggers and my still active input is correctly logged. However that's it... I can't blur or edit any of the elements properties.
Question:
How do I correctly remove focus from the active element either on window.onfocus or window.onblur?
Thanks!
PS: it also does not work with jQuery:
$(window).on("focus", function () {
$(document.activeElement).blur();
});
and I'm looking for a JavaScript only solution.
EDIT:
document.activeElement.blur() works fine from the console, but not from my listener.
Ok. This works:
window.onblur = function () {
document.activeElement.blur();
};
So it seemed the blur worked fine, because if I console activeElemnt before and after my call to blur() it switched from an INPUT to the BODY tag. Correctly, my body has it's class set to FOOBAR. Problem for me was that the text element still retained focus, but I assume this is due to some handler inside jQuery Mobile.
The above solution works the other way around. I remove focus of the activeElement when the user switches a tab. Works.
I have defined some events when input textbox has got focus and some task to perform when focus is removed. I am also using iscroll4 but textbox is out of the scroller. My problem is when textbox gets focus and i click on the iscroll area the foucs from textbox is not going. But if i click on area outside iscroll the foucs is removing from the textbox. I am not understand why clicking on the iscroll region does not remove the focus whereas click events work. I have defined the blur event.
I am using iscroll4 and in the iscroll.js file there is the following event defined :
onBeforeScrollStart: function (e) {
if (e.preventDefault) {
e.preventDefault();
}
}
I commented the e.preventDefault line and it worked for me. This was basically preventing the blur event to fire when i clicked on the iscroll region because this is the first event that iscroll fires when it receives any mouse down event.
jQuery(document).ready(function ($) {
$('body').keypress(function (e) {
alert(e.which);
});
});
This will pop up an alert when a key is pressed in Chrome but not in Firefox. However, if I create a text field and focus it, then press a key, an alert will pop up in Firefox. (Even though $('body') is still the jQuery object.)
How can I get the event to fire in Firefox even when a textfield is not focused? Is there a workaround? I will be firing an event when the Enter key is pressed anywhere on the page.
Thanks guys
If you have no elements on the page, the browser might assume that the <body> element (or any of its descendants) doesn't have focus. Try binding your event to the document:
jQuery(document).ready(function ($) {
$(document).keypress(function (e) {
alert(e.which);
});
});
#DarthJDG is right, but you should still set focus on the window if you want to listen for keypresses immidiately after page load. in some cases browsers will leave focus on the address bar. so add:
$(window).focus();
after setting up the keypress handler