I have an input and have a function that is called on blur event in Angular 7.
In iPhone browser (Safari), when I tap outside the input box, the event doesn't get fired, however it works well on Chrome. What could be the reason?
It is exclusively for an input type only and not an <a> type.
Related
On Mobile iPhone when I click on a input form it gives me the keyboard with up/down arrows to scroll through the form. Once this happens I can jump around the form focusing anywhere, however when a particular select dropdown is chosen it always focuses back to the first form element. This happens on both Safari and Chrome.
Does anybody have an idea why?
It had to do with a label, duh. I had a "for" tag pointing to the wrong element.
Problem solved!
On this site : mecanomedic.com, the menu template work fine in "normal" desktop browser, but dont slide down on ipad-iphone device. What can be the problem ?
Some tell me it's a css problem, but HOW safari desktop work ?
The problem is that the menu expansion relies on the user hovering with a mouse. On touch devices like iPads & iPhones, the hovering gesture can't be replicated because there's only one input- touch. If I were you, I'd take a look at Twitter's Bootstrap menu setup and perhaps use media queries to serve up a different menu on smaller screen sizes.
Here's an example of a Bootstrap navigation bar in action (you'll have to inspect the code to see how it works).
Add a href to the top-level <a>'s so that they can be focusable:
Produits
Elements that are focusable receive mouse events and hover styles when the user taps on them.
As #Matt stated, the problem is that your menu relies on a hover event and unfortunately that event is unavailable on touch screen devices.
One way to fix this would be to:
Check if the current user's device is an iOS device
If the device is an iOS device, use javascript to trigger a menu item's "show event" when the menu button is CLICKED instead of ROLLED OVER / HOVERED.
This would result in the menu being shown when the user taps a menu button.
I'm using the mediaelement.js jQuery plugin HTML5 player. The player is used in the background of the page so that all menus are above the player. This works perfectly on Firefox, Chrome, OSX Safari and Opera. On iPad Safari, the menus still appear above the video in a z-indez position layered div, but I can't actually click on the menus.
Any idea or suggestion?
I'm having the same problem as lonchbox.
On mobile devices I have a anchor with position:fixed on the bottom right corner, that opens up a div on the click event. On any area of the website the click event works normally, but if I try to click on it while above the player, the click doesn't work.
The pointer-events:none solution is not the case since the player is not capturing the wrong intent of the click, and the click event of the player is working correctly.
I'm guessing it's a z-index problem - on a quick debug via the safari web inspector, deleting the player div makes everything alright. But changing the position to absolute and setting up a high z-index (on both the anchor and the player div, also on the player div's parents) didn't made a difference.
So the menu you want to click on, that shows above the media element doesn't work? There is a CSS property that you can set on the element you don't want receiving clicks, its called pointer-events.
So for your player you could have a rule like this:
.thePlayer {
ponter-events:none;
}
when that rule is set, it can no longer receive click events. You probably don't want the rule to apply all the time, so use some javascript to set it only when the dropdown is activated.
I'm experimenting with ways to have tooltips work across a variety of mobile devices. Unfortunately, the span of devices I need to support ranges from Nokias to iPhones.
Unfortunately, some of the browsers I'm dealing with don't support the use of the title attribute for tooltips on focus. As such, I need to come up with a different solution.
For starters, I'm playing with pure-css tooltips: http://psacake.com/web/jl.asp
This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.
On an iPhone, this produced an odd side effect. Tapping the link once exposes the tooltip require a second tap to actually activate the link.
However, applying a simple style to a different link's :hover pseudo-class (changing the background color) does not have the same effect. One tap triggers both the style and the link (you see the :hover style briefly before the next page loads).
I've solved this issue for mobile devices by switching to using the :focus pseudo-class which appears to not be triggered by the iPhone (and the Nokia touch device I am using). Of course, that's not ideal if this app were to be used on a desktop browser as well.
So...the question: Is there documented logic as to when the iPhone Safari browser decides to interrupt a click event on a link to expose the :hover pseudo-class vs. not interrupting and letting the link be triggered on the first tap?
I was trying to find you a link in Apple's documentation, but the most specific I could find about :hover was that it is emulated and can cause unexpected results. I did find one place that said it is only shown if the user taps and holds the object. That page (near the bottom, "Don't Use Unsupported iOS Technologies") also says that normal tooltips (using the title attribute) would be shown when that happens also.
If you will accept an assumption as to why the behavior is different for changing the style and displaying a tooltip, I would guess that it is similar to the way mousemove events are handled. This Handling Events page says that, if the contents of the page change during a mousemove event, the rest of the events in the chain (including mouseup) are not sent. I am assuming that this behavior also applies to :hover. If you are using display: none to hide the tooltip, you could try using visibility: hidden instead as it is interpretted as "the object is still here, but you can't see it."
Here is my setup:
I have a button and a textbox
The textbox has an "onFocus" Handler which triggers the "selectAll" method
the button has an "onClick" Handler which does the following:
show textbox
textbox.focus(true) and
textbox.selectAll();
But it does not (on mobile devices).
The thing is: this works in FF and Safari - but it does not on mobile WebKit. When I click the button the field gets focused and selected for a milisecond (sometimes not even that) and then returns to focus the button …
A already tried to insert a Timer which then would do the focus - does not work either.
I also tried to capture all events and prevent them - because there is an onFocus event being fired by the button after onClick. I even tried setting the focus to the textbox from the onFocus event of the button. No chance.
Any other Ideas?
The problem is that GWT doesn't compile Javascript code for touch devices. You will need to create your own implementation.
Take a look to this article: Supporting multi-touch events