mobile keyboard popping when slidetoggle is used - javascript

I am working on a mobile webpage. I have one element, that has a text field, that I call jQuery slideToggle on, so it can be hidden from view when the user wishes to dismiss it.
It works fine on browser, even on simulating a device, and in an actual device. The problem is that when the button to dismiss it is clicked on an iPhone, the keyboard pops up.
I already checked if the is the text field is being focused, but seems not to be the case.
What might be the reason for this behavior?

Related

Prevent soft keyboard closing on text input blur

I am building a Web chat application (PWA).
I have a chat input, which I would like to keep focus on even when the "send" button is clicked. So I want the keyboard to stay open even when a chat is sent, either by pressing a "send" button, or by clicking on the "send" in the mobile's keyboard itself. This is the behavior you get in messaging apps like Whatsapp, iMessage, etc.
Even though it works on Android as expected, but I can't make it work on iOS Safari / Chrome.
What I have tried so far is as follows:
Bind touchstart / mousedown event, call preventDefault and stopPropagation.
Additionally, I am also doing "preventDefault" on the click event.
How can I achieve this on iOS Safari with vanilla javascript + HTML?

iOS - removing an iFrame with focused input element keeps the cursor visible and keyboard open

Open in iOS:
https://jsfiddle.net/rLLvd18q/31/
I have a page hosting an iFrame with an input element. The outer page has a button that removes the iFrame from the DOM. In Safari/Chrome in iOS 9.3.2 (I tested on iPhone 6s) clicking that button while the input is focused, causes the iFrame to be removed, but the cursor stays blinking on screen. Furthermore, the keyboard stays open (clicking keys does nothing). After dismissing the keyboard, clicking anywhere else in the screen causes the keyboard to pop back again.
I have already tried posting a message upon clicking the button from the hosting page to the iFrame upon clicking the button and doing
document.activeElement.blur()
inside the iFrame. Didn't help... I'm running out of ideas...
I've been trying to solve this issue in my project, and I noticed the iframe is NOT the active element. A possible workaround could be focus programmatically the iframe and then blur it.
This works fine for me. I checked the iOS forums and it seems that's an iOS9 webview bug and could be present in iOS10.

tap event being handled by elements that dont exist at time of tap

click/tap event not working correctly
click or tap seems to fire on the new element that appears even though originally handled by other element which caused the element to appear in the first place... wtf?
I have a mobile web app where a button brings up a bootstrap modal with a unordered list in it. The items in the list make a selection and close the modal. In standard chrome and chrome's android emulator there is no issue. But on my tablets, when you click the button, if the modal covers the button, the modal is brought up then a selection is made on the modal exactly where you clicked on the button. Its like a duplicate click/tap is being processed at the same location. I have tried tap, click, and touchstart events for both the button and the lineitem. What can I do to prevent this issue?

Input loses focus when keyboard opens in iOS Browsers

Any input that I tap inside of my Swiper-Slide on the page lose focus when they keyboard opens (in Chrome and Safari). Once the keyboard is open, I can click the input and then start typing. I'm not exactly sure what's causing the problem because inputs outside of the slider work like normal.
I have an onFocus function being called by the input that doesn't fire the first time it's clicked even though the keyboard pops up. Is there some Javascript or Jquery way to force the browser to focus an input that works in iOS browsers?

Is there a way to "reset" mobile Webkit's pseudo-hover behaviour after the initial hover-triggering click?

I'm working on a website where I'm using Javascript (via JQuery) to add pop-up boxes containing extra information for items in a list. I'm using JQuery's mouseeneter and mouseleave events to make the popups appear and disappear which of course all works fine in desktop browsers.
In Mobile Safari the popup appears when I click an item (which is what I expect and what I want to happen) and I have added an ontouchstart which triggers the mouseleave JQuery event thus hiding any visible pop-up when the user does anything else. This works fine too except that when a user taps an item the pop-up of which they've just looked at and cancelled (either by scrolling or by doing anything else that triggers the ontouchstart event), rather than it showing the pop-up again it activates the link attached to that item.
If a user were to tap another item instead of tapping the same item again then that new item's pop-up would show and then if they were to tap the first item again then that item's pop-up would show. Again, this is both expected and what I want to happen.
It would seem that once an item with a hover event has been tapped and Mobile Safari as been forced to make that event happen, that item is then flagged as having had its hover event triggered and so the next tap doesn't have to pretend to be a hover, it can be a normal click. Tapping another item with a hover event seems to "reset" the flag set for the previous item.
I'd like to be able to 'reset' this flag for myself so that, rather than how things work currently where clicking an item shows the pop-up and the next click on that item, even if the pop-up has been closed, will activate the link, instead when I close the pop-up with my ontouchstart, and so to my mind the item is no longer being "hovered over", a second click on that same item should show the pop-up again and then only by clicking on the item whilst the pop-up is visible should the link activate.
The secret would seem to be in getting Mobile Safari to exit its "pseudo-hover" mode when I use ontouchstart to trigger mouseleave but I have been unable to find anything useful anywhere on exactly what's going on when Mobile Safari pretends to hover over anything and whether any of this is accessible via Javascript events.
I know I could write a version of my pop-up code to work specifically for Mobile Safari but it seems much more efficient to me to get the browser to do most of the hard work of mimicking hover events. If only I could get this final little niggle sorted out.
I'm guessing the hover state is tied into which element has focus rather than as a flag. One tap gives focus, second tap activates the link.
Try closing the pop-up by giving another element focus, and see if that works out any better.
$('body').focus();
tl;dr but try this:
# :hover fix
# e.g.: body:not(.stoppedhovering) .styled:hover
hoverFix = ->
window.clearTimeout hoverFix.delay if hoverFix.delay?
$('body').removeClass 'stoppedhovering'
delayed = -> $('body').addClass 'stoppedhovering'
hoverFix.delay = _.delay delayed, 600
$('*').live 'touchstart', hoverFix

Categories