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
}
});
Related
I am using coveo Framework and i used facets inside a dropdown button i wrote a window.onclick function so that when clicked outside dropdown button the dropdown should be closed.
everything seems to be working fine but when i clicked facets checkbox the dropdown was closing and when i talked to coveo team they said the query was triggered when coveo checkbox was clicked thats the reason the dropdown was closing when clicked.
To fix this i used event.stopPropogation and that was working fine in desktop mode but when it comes to IPAD Mode this is not working any help
Here is my code
// Prevent event bubble up to window.
document.getElementById('dropdown').addEventListener('click', function(event) {
event.stopImmediatePropagation();
});
function close() {
document.getElementById('dropdown').classList.remove('show');
}
window.onclick = function(event) {
if (!navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i)) {
if ((!event.target.matches('.dropdown-backdrop')) && event.target.closest('#dropdown') === null) {
close();
}
}
};
I believe the issue is on a touch screen device, you actually get touch events possibly in addition to mouse events. I suspect if you attached another listener to touchstart that does the same thing as click you will see the same results on the tablet.
In theory you should see no click events on a tablet (a user cannot click without a mouse) but in practice the browser emulates click events. However, when those events are generated the browser may fire both touch events and mouse events in response to the same user input. If both events are fired you're successfully stopping the click event from propagating but not the touch event.
Update
You haven't given enough detail to fully give an example, but the change happens in the listeners you attach to your dropdown element.
// Note instead of using the same anonymous function twice,
// I've defined a function to stop propigation
function stopProp(e) {e.stopImmediatePropagation();}
document.getElementById('dropdown').addEventListener('click',stopProp);
document.getElementById('dropdown').addEventListener('touchstart',stopProp);
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 have:
<input type="text" />
and
$('input').blur(function(){
alert('stay focused!');
});
I want to prevent the blur function running when I'm "blurring" by clicking on an anchor element.
I.E. if i tab to another input, click somewhere on the page etc i want the blur to fire, but if i click a link, I don't want it to fire.
Is this easily achievable, or do i need to hack about with delegates and semaphores?
Thanks
I had to solve this problem myself today, too. I found that the mousedown event fires before the blur event, so all you need to do is set a variable that indicates that a mousedown event occurred first, and then manage your blur event appropriately if so.
var mousedownHappened = false;
$('input').blur(function() {
if(mousedownHappened) // cancel the blur event
{
alert('stay focused!');
$('input').focus();
mousedownHappened = false;
}
else // blur event is okay
{
// Do stuff...
}
});
$('a').mousedown(function() {
mousedownHappened = true;
});
Hope this helps you!!
If you want to keep the cursor at its position in a contenteditable element, simply:
$('button').mousedown(function(){return false;});
Delay the blur a bit. If the viewer clicks a link to another page, the page should change before this code gets a chance to run:
$('input').blur(function(){
setTimeout(function() {alert('stay focused!');}, 1000);
});
You can experiment with what delay value for the timeout seems appropriate.
You can get this behavior by calling preventDefault() in the mousedown event of the control being clicked (that would otherwise take focus). For example:
btn.addEventListener('mousedown', function (event) {
event.preventDefault()
})
btn.addEventListener('click', function(ev) {
input.value += '#'
input.setSelectionRange(ta.value.length, ta.value.length)
})
See live example here.
Some clarification that was too long to put in a comment.
The click event represents both pressing the mouse button down, AND releasing it on a particular element.
The blur event fires when an element loses focus, and an element can lose focus when the user "clicks" off of the element. But notice the behavior. An element gets blurred as soon as you press your mouse DOWN. You don't have to release.
That is the reason why blur gets fired before click.
A solution, depending on your circumstances, is to call preventDefault on mousedown and touchstart events. These events always (I can't find concrete documentation on this, but articles/SO posts/testing seem to confirm this) fire before blur.
This is the basis of Jens Jensen's answer.
Update: I tried a suggestion by #newmount however, if I call fireEvent('blur') then the focus of the trigger isn't fired by any keyboard action. (It resumes once there is a mouse click)
To be honest the triggerfield doesn't fire blur in a certain situation.
From within the focus event if I have a reference to another field and do field.focus() the blur of the current field doesn't fire. What's worse is it fires later if I click anywhere else.
Below is code and steps to reproduce:
Ext.onReady(function() {
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
labelStyle: 'white-space: nowrap',
initComponent : function() {
this.on("focus", function() {
console.log("Trigger focused");
//the problem point.
//I do some processing here and then
//in some case I do the following:
Ext.getCmp('some_field').focus();
//when this is called the BLUR of this trigger field isn't fired.
});
this.on("blur", function() {
console.log("Trigger blurred");
});
this.callParent();
}
});
//end of onReady
});
Here is a live fiddle : http://jsfiddle.net/sq37s/
To Reproduce:
Click into the first name field
Hit tab, it will jump into the trigger and then jump into the mid init field.
The console at this point will not show a Trigger blurred
Now click anywhere in the panel and you'll see Trigger blurred.
This behavior is causing some very unexpected issues in our application, this is something so trivial we based assumptions on the fact that something like this will work.
I would love:
Any suggestions to work around this, perhaps pure javascript
Any hope of getting the extjs guys to fix this?
When the focus gets changed programmatically, the event may not get fired (think events gets fired only on user-action). One workaround is to fire that event programmatically while changing focus
this.on("focus", function(e) {
console.log("Trigger focused");
if (someConditionToChangeFocus){
e.fireEvent('blur'); //Fires the blur event
Ext.getCmp('some_field').focus();
}
});
[Edit]
Another approach is to use FocusManager's beforecomponentfocus event, fiddle here: https://fiddle.sencha.com/#fiddle/3mq
I'm wondering if there's a way to capture the iPhone's virtual keyboard's done button event, using JavaScript?
Basically, I just want to be able to call a JS function when the user clicks done.
I was unable to track the 'done' button being clicked. It didn't register any clicks or keypresses. I had to addEventListeners for change, focusout and blur using jquery (because the project already was using jquery).
You need to do some kind of this:
$('someElem').focusout(function(e) {
alert("Done key Pressed!!!!")
});
It worked for me, hope it will help you as well.
After searching and trying this solution
basically is say:
document.addEventListener('focusout', e => {});
tested on IPhone 6s
This question is kinda old, but I've found a hacky way recently to make this working.
The problem with the 'blur', 'focusout' events is that they fire even if user just tapped outside the input/textarea, and did not press the 'Done' button, in my case, UI should behave differently depending on what exactly have happened.
So to implement it, I've done the next thing:
After showing the keyboard (the input received the focus), add click handler on the window via the addEventListener function. When user clicks on the window, remember the timestamp of the click in the variable (let's call it lastClick = Date.now())
In the blur event handler, set a timeout for 10-20 ms to allow other events happening. Then, after the timeout, check if the blur event happened in a time difference lower for example than 50-100 ms than the lastClick (basically Date.now() - lastClick < 50). If yes, then consider it as a 'Done' button click and do corresponding logic. Otherwise, this is a regular 'blur' event.
The key here is that tapping on keyboard controls (including Done button) does not trigger the click event on the window. And the only other way to make keyboard hide is basically tap on other element of the page and make the textarea lose focus. So by checking when the event happened, we can estimate whether that's a done button click or just blur event.
The answer by oron tech using an event listener is the only one that works cross platform.
document.getElementById("myID").addEventListener("focusout", blurFunction);
function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}
"Change" event works fine
document.querySelector('your-input').addEventListener('change',e=>
console.log('Done button was clicked')
);
attach a blur event to the text box in question. The done fire will fire this event.
The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})