I have a web app where I need to move content based on if the virtual keyboard is being displayed.
When the user clicks the input, I assume focus and the keyboard would be displayed. I shift some content around.
I then need to know when the virtual keyboard is hidden to move content back. I assumed the best way to do this was on blur but this is preventing the user from clicking the buttons on the screen. Click/tapping hides the keyboard, then the button has to be pressed again to finally register the click. There is a submit and cancel button so on blur, I can't assume they are clicking submit and programmatically click it.
//issue: button click being ignored
$(document).on('blur', '.swal2-input', function () {
if (isMobile.any()) {
//move content
}
});
I have solved the issue by listening to mousedown on the element and then triggering the click from there. You
Related
I have a program where I have several clickable buttons as well as a reason to click enter. Issue is, if I click a handful of the buttons with the mouse and then click the enter key on my keyboard, it does what enter should do and it also acts as though I had clicked the last button that I clicked one more time. I want the clicking to only be done with the mouse and have the enter key not be able to click buttons. How do I do this?
code
Here is how I am currently making the buttons clickable and getting the input of the keyboard.
By clicking on the tile button, it gets focus. Hence, subsequent enter triggers the button.
You could "un-focus" the button:
// tile is a reference to the button, as per your question
tile.addEventListener('click', (evt) => {
// un-focus
tile.blur();
// do some stuff
});
So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});
At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.
When an text input element has focus (and the soft keyboard is visible), I can't click the submit button (which is clearly visible) directly. I have to first dismiss the keyboard (by clicking elsewhere or on "Done" on the keyboard), and then click the submit button.
This is confusing behaviour. I have considered removing the log-in button altogether when the keyboard is visible, but that would be too confusing (for users wouldn't know that they could click "Go", or will be annoyed that the login button keeps disappearing).
This only happens on iOS (not sure if its restricted to iOS 7, but suspect it might be), and I'm using Telirik AppBuilder for my app.
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
Because I was using <button> tag the soft keyboard popped up when not required. I have now changed all for <table> (inside a <td> tag, but could be a <div> ) with an <img> tag inside for the icons. To make the table look more like a button there is a CSS class for colours/borders. A submit area is right at the top (too).
The page can be inspected at http://ask.stroudvoices.co.uk/
It would seem that Android (assume iPad etc also) treat buttons as another kind of <input>, whereas <table> is regarded as <body>.
Sometimes there is a simple answer, from old technology!
I meet a similar problem.What my need is when I tap the submit button and I want to keep the soft-keyboard visible.
Here is my solution.
submit.addEventListener('mousedown', function(e) {
e.preventDefault();
});
I give the submit button a mousedown event, and prevent the default event. it's work on most mobile phones.but in some system found ios 12.1.2 is not available.it's just like the question's owner says, i need to tap twice, one to hide the keyboard, second to reach the submit button.
This confused me and I can't solve it.
I am trying to create to popup div when pressing enter key, while the div contains a button (that I script to focus when it fired up) that will close the div when you press enter again. I receive the enter key from binding keypress and keydown, end up having different results.
Binding 'keypress'
Things work properly, with first enter key fires up a popup box and another enter key to dismiss the popup box.
Refer this JSFiddle.
Binding 'keydown'
This doesn't work correctly, as it fires up and dismiss the popup box immediately (which you won't see) with only one enter key.
Refer this JSFiddle.
My question is why would keydown generate odd behavior, it is like firing enter key twice for me, but the truth it wasn't. If I remove the button focus(), it will works correctly. That's puzzled me.
Tested with firefox and chrome.
You're rebinding the click event every single time the popup opens, so each time you click the close button it'll fire it multiple times which will cause unexpected behaviour.
Eg:
var Popup = function(){
$('#ok-button').live('click',function(){
$('#popup').remove();
});
};
This code means every time you create a new Popup instance, every single $('#ok-button') that exists will have another click event bound to it.
As for the reason why it immediately closes when you use keydown vs keypress, that's due to the fact that the moment the popup is opened you've set the focus to the button.
The two key events work differently (firing at slightly different times during the key process). It appears that with keydown, you're changing the focus in the middle of the actual action (pressing the button on the keyboard) which then continues and triggers the focused click.
Removing the focus stops the weird double trigger behaviour because you're no longer binding another click event.
I'd suggest changing your click event:
$('#ok-button').live('click', function(){
$('#popup').remove();
});
var Popup = function(){
// Whatever
};
I'd also suggest looking at jQuery's on event instead of using live.
In the autocomplete result list. How do I capture the click event? Currently results are links. When clicked they open a new window with the embedded url but when this happens the autocomplete doesn't lose focus and the result box gets stuck open. It stays open even when the user comes back and clicks anywhere on the page. the only way to make it lose focus is to click inside the input box and then click back out.
It looks like opening the new window loses focus from the input box but does not fire off a blur() event.
I was thinking if I could capture the click event I could just manually trigger a .blur() but I was unsuccessful at my attempts using the class for the list elements $("li") or their css names $(".ui-menu"). I also tried in the autocomplete Select event but that didn't do anything.
This looks like it might be a solution: http://jeremydorn.blogspot.com/2010/04/fixing-jquery-ui-autocomplete.html
But I was hoping for something more elegant.
Thanks
Why don't you give the links a click handler that closes the autocomplete?
For example:
$("a.autocompleteLink").click(function() {
$("input.autocomplete").autocomplete("close");
});