I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.
To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.
I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.
Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?
Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.
To determine that the keyboard is showing, you can use this solution:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.
If someone has a better hack, I'd really love to hear about it.
Related
Similar to Inline UIPickerView in a table but more focused on React Native and Expo and I am looking at it from the point of view of a tablet.
In React Native Community DateTimePicker it provides an in-line input of a time
However, they don't provide a similar function for non-time based pickers or at least I can't find it. Is such a component not available in iOS because I can't seem to find something that behaves similarly where if you tap to show the picker and it starts editing the "original" disappears and places the field close to where it originally is.
I want it in-line as in a tablet the width is much larger so it does not make sense to do the style as shown in the HIG as it is for a phone form factor.
react-native-dropdown-picker is another one I tried to take a look at but it does not match what I would expect from the OS controls.
im trying to fit a Facebook likebox in a webview on a Windows Store APP.
I have done it fine on Android and IOS, just setting the likebox url as html string to the webview.
But in WinRT it shows the box on the upper left corner and A LOT of white space, so the box is really small, i can zoom in to fit it well by hand.
Android and IOS just fit the box in the webview.
Is there any way i can fit it well? also i need to disable user scroll, i only want the user to be able to click the like button.
Thanks in advance.
Background/Context:
I am developing touch screen based kiosk application with JavaFX. The app integrates browser – WebView. The problem is that all user inputs have to be made through on screen keyboard (SW keyboard)
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
Even though I searched the Internet, I did not find this kind of feature.
My questions:
Does JavaFX / WebView provides any support for these cases?
If you were to tackle this problem, what would be your approach to that?
My solution so far:
I have a small button (at one corner of the screen) that allows user to show/hide on-screen-keyboard. Since they have to do that manually, it is quite annoying. Especially on sites where browsing (consuming information) and text inputs changes frequently.
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
A potential strategy for doing this:
Start with a jdk8 preview.
Run the application with -Dcom.sun.javafx.isEmbedded=true to enable the virtual keyboard.
Use a webengine.executeScript technique to embed jQuery into the target page.
Bind a jQuery focus handler to the relevant html elements.
In the jQuery focus handler make an Upcall from JavaScript to Java.
Upon receiving the upcall make use of JavaFX's Virtual Keyboard.
As the user enters values into the keyboard, make executeScript calls to set the value of the corresponding html field.
Some parts will likely be a bit (or totally) flaky, but perhaps other parts may prove useful to you.
In the future, if WebView is supported on touchscreen platforms on embedded devices, I'm guessing that out of the box it will work well with a virtual keyboard.
I'm aware of how to make invisible elements keyboard focusable and read by screenreaders, however for the purpose of a student-led survey - I would like certain elements to be invisible to screenreaders / keyboard focus to be less distracting, but have them visible for tutors to use using a mouse.
I've tried using iframes, however the keyboard can still 'tab' into them. I was considering a pop-up window that can control the parent window? - but might have some issues with blockers etc.
Many thanks! Mike
One of the simplest ways to get content ignored by a screen reader is to place it into an image and then set the alt text on the image to be "" in your HTML. This will cause the screen reader to skip this content since it can't interpret it. This will also eliminate any tabbing or keyboard focus since the web browser will treat it like any other image in your page.
Another way to do this, and a bit more complicated, is to detect if your page is being pulled into a screen reading browser and set the CSS properties of the content you don't want read by the reader to be have the following:
visibility: hidden; display:none;
Screen readers will ignore anything that is invisible and/or not displaying, thus it will not be read to the user. This is also a bit cleaner since you're not destroying the SEO ranking of the page but are just modifying the content displayed to users who don't need to see/hear it.
a good way to prevent screen readers from viewing an element is to apply the aria-hidden="true" attribute; this is fairly well supported by browsers, and will prompt JAWS and other screen readers to skip the content. You can also use role="presentation" - there's a good article on this here: http://john.foliot.ca/aria-hidden/
Applying tabindex=-1 will only only allow the element to be focused on by scripts and not keyboard input, so this will work too. Additionally, although I don't recommend it, I found while tearing my hair out over someone else's script, that if you don't have an 'href' attribute defined for a link element, (making it invalid) this also prevents focus.
I'm having some difficulty showing the virtual keyboard I want for the Blackberry Storm. I have an option to toggle the keyboard's visibility on a certain screen. Whenever the user types a number, it's handled by the screen, rather than any particular field (there are no textfields on this screen). This much works fine. I can show and hide the keyboard when the user chooses to.
My question is this: How do I make the keyboard that shows up the same as what would appear had the focus been on a BasicEditField with a numeric filter applied, without using a BasicEditField for the input?
I don't think BlackBerry has exposed any APIs to allow for programmatic control over the type of virtual keyboard that is shown. I seem to remember reading about it in the BB forums (although unfortunately I can't find it now).
One thing you could try doing is using a BasicEditField with a numeric field, but place it offscreen so that it isn't visible. When you want to capture numeric input from the user, put focus on that element. I haven't tried this, it's just a thought.