I've integrated Bing Maps into a web page using javascript. Simple integration of Bing Maps.
I'm having an issue where when they click on the map, the keyboard comes up (on an iphone). How can I stop BingMaps from popping up the keyboard?
Thanks,
Gob
A little late, but I just ran into this problem and figured out the solution:
Bing maps allows keyboard shortcuts (i.e. you can type R, A or H to switch to Road View, Aerial View or Hybrid View, respectively). To do this, it seems like they add a transparent input field nested inside the div you render the map in. Because of this, on iOS devices, tapping the map causes the keyboard to appear since it thinks the user is typing in a text field.
To fix this, simply add the following CSS:
#wl_ve_mapInput { display:none !important }
This will hide the text field and stop the iOS keyboard from appearing when tapping the map. This problem also occurs on Android devices.
NOTE:
Obviously, you will no longer be able to use the keyboard shortcuts. A possible approach would be to add some code to only add the CSS if it's a mobile browser, or only iOS devices. This is fairly easy to figure out, but it's not part of the scope of the original question.
Related
So, there's an html page with an image map (img tag with usemap attribute) and clickable areas. Lately, I think after iOS 15 upgrade on iphone (XR, XS, 13), Safari stops firing onclick event on areas. Initially onclick works if you tap lightly, with quick finger presses, but as soon as you tap a little longer (just a bit stronger tap, or a long press) it starts behaving as if there's no map and areas associated with the image.
You can test here https://demo.rezmagic.com/maptest.html
If you see "area click" messages, it works correctly. When you start seeing "image click" messages, it means it's broken - it does not detect areas anymore. If you reload page, it starts to work correctly again.
Any ideas on what's going on here? Possible workaround? I submitted a Safari bug on Apple feedback but I am not sure it was the right place.
meeks seems to be correct about the OCR capability of newer Safari browsers breaking image maps.
The following is one workaround that you can use, but it will break the OCR capability:
Create a transparent gif of the same size as the imagemap. Let's call it placeholder.gif. Then add it in-front of the actual image and put an image map on that, like so:
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
It works for me.
This is absolutely a Safari bug on mobile and desktop and it's been driving me nuts. Your image doesn't replicate the issue on desktop safari, but those with higher resolution and more obvious text do.
What's happening is that Safari now OCRs images to allow users to select and copy text from them. It does this by adding shadow DOM elements containing the text that float above the image, all contained within one DIV that entirely covers the image. This doesn't happen instantly, but seems to take a little time and perhaps depend on user interaction with the image.
You can watch this happen by opening the MDN web docs page for the map element here and looking at the Example (not the demo) with Inspect Element. The img tag with the map starts out simple, but once it shows that it has children you can expand it and see the shadow DOM elements. Once those are added the map no longer functions, presumably because the overlay elements pass through clicks to the image but not the map.
I had developed a workaround where you listen for click events on the image, get the click event's offsetX and offsetY coordinates, then iterate through the elements to compare the event's offsets with the coordinates, and then trigger a click on the that matches.
However, then I realized that iOS 15.4 came out today and so I upgraded my iPhone and it seems to be fixed now without any workarounds. So just upgrade and you should be fine.
I am building a web application for use by visually impaired users to explore SVG diagrams via a tactile printout. In order to allow this I need to calibrate the tactile printout to the image on the device. Thus I need to be able to receive the x and y coordinates of a click when using a screen reader, specifically VoiceOver for iOS.
Using Talkback, I would tap and hold until I hear an audible click and then use my second finger to double tap and send clicks to the application itself from that position.
When using VoiceOver, I understand how to send swipes by tap and holding until a triple bell and then swipe. However, I cannot for the life of me find out how to send a positioned click.
On a side note, I am using Hammer.js.
Any ideas?
Thanks
As far as I can tell, this functionality was supplanted by the interactive drag-and-drop support added to VoiceOver in iOS 11.
I am trying to develop an app with the Apache Cordova tools for Visual Studio and i believed i had finished the project until I started using it on a device and the on-screen keyboard re-sized the entire app when it popped up. The application looks the way i would like it to until the user selects an input box and the on-screen keyboard pops up, which then makes the screen shrink to compensate for the keyboard.
How can I make it so that the keyboard just overlaps the layout already present instead of re-sizing it and making a new one? I can't seem to find any solutions on the internet so any help would be greatly appreciated.
Thanks
Dustin - you need to use the Keyboard plug-in to help customize this behavior. You can find the plug-in at NPM: https://www.npmjs.com/package/cordova-plugin-keyboard
The exact line of code that will give you what you want is:
Keyboard.shrinkView(false);
Cheers,
Kirupa
I have a really tricky problem I have been trying to solve for weeks now.
I want to make a web chat for mobile devices. I have some speech bubbles and a footer that has an input box. The footer should always be on the bottom. And when the keyboard opens, it should move just above the keyboard that the user sees when what he writes.
That works so far. The tricky thing is to have the view with the speech bubbles scrollable so that I can scroll to the first message WITHOUT THE FOOTER MOVING ALONG.
I had a version which only worked in Google Chrome (tested on iOS), but not in Safari:
http://marcback.es/work/sparkassenchat/v7
It is an ugly solution which involves Javascript Code etc.
Does any of you guys have a solution for that? The solution doesn't have to be pretty, it just needs to work. Please help :/
I have a google maps window inside my home page. It works perfectly in a PC, but in a mobile device dragging the map drags the page below it and not the map.
You can test it here (click the "GPS Map" button at the top right):
http://luis.impa.br/photo/1407_Obidos/index.html
Any idea how to fix it?
Thanks!
L.
This is not a full answer, but a partial one.
I realized that the dragging of the map is disabled when the browser is set to some kind of "desktop mode", i.e., when the browser identifies itself as working in a non-touch device. So Google maps understands that there is no touch screen.
So, in order to drag maps, you do need to assure that your browser is not set to a "desktop mode".
Still, I don't know (or even if it is possible) how to allow dragging of the map under "desktop mode".