I'm adding some mobile usability optimisations to our site. As part of this I am tweaking the type attribute of textfields, to give the user the best input tools for the expected data type.
One issue I have come up against in touchscreen mobile devices is that browsers on different OSes, and even different browsers on the same OS, show different onscreen keyboards when input type="number" is used.
Safari on iOS 4.3.3 (iPhone 4) and Chrome on Android 2.3.4 include a decimal point, but Firefox on Android 2.3.4 does not.
I have tried adding the step attribute (step="0.1") with no improvement in Firefox.
If I cannot show the decimal point I will need to show Firefox the full QWERTY keyboard, which is obviously not going to make for the best user experience. It also raises the issue of browser/device sniffing. Either I'll need to make QWERTY the default, and show the numberpad to the handful of devices I can actually test on, or make numberpad the default, and switch back to QWERTY on devices which I know this will break on, the latter option being far less robust as I cannot test on every device ever made.
Testing for support for input type="number" is not a fix, as obviously the browser does support the element, it just doesn't offer enough keyboard options to enter all number types.
So.. I was wondering if anyone knew of a way to test for the presence of a certain key (such as the decimal point) in the keyboard the browser/OS assigns to the input type, and/or if anyone else has some better suggestions, as I'm quite new to mobile devices.
I should also mention that I am using JavaScript here, as this is a website, not a native App.
Thanks :)
Unfortunately, firefox does not support numeric input type. However, you can still try using these additional HTML attributes for making an input field prompt the user for numeric input
inputmode='numeric'
pattern='[0-9]*' //this makes it show only the numbers 0-9 without all the slashes and dashes and everything. Ignore this if that's not what you want
Related
I am struggeling on a question of my client to use a custom keyboard on my webapplication on a mobile device. That keyboard should only have all the digits, a dot, a backspace and an enter. Nothing more, nothing less.
I know you can use the different HTML5 input types (tel, number,...) to get a different keyboard of the Mobile Operating System, but these keyboards are different on each Mobile Operating System (Android, IOS, Windows Mobile): http://mobileinputtypes.com/ - Using the type 'tel' on IOS is ok, but on android I get a whole lot of other options that are not necessary. Same goes for 'number'...
I know it is not possible to customize the default keyboard of an Mobile Operating System.
I have found the plugin http://the-darc.github.io/angular-virtual-keyboard/ that at first sight does the job (look at the Numeric keyboard with customized css example). The only problem is that on mobile the default keyboard of the Mobile Operating System always pops up.
Is there a way to not show the default Keyboard or are there any other options that you can think of?
Thanks for the help, much appreciated!
I'm using Masked Input plugin for jQuery (Version: 1.3.1) on my site.
Mask of the input is following:
$('#pan').mask('9999 9999 9999 9?999 999', {placeholder:" "});
This is for credit card pan so only digits and spaces are acceptable.
When android browser user taps on the input he needs to switch his keyboard to digital.
That's what he does.
But after entering a single digit keyboard switches back to "English letters".
I made an investigation and found out what couses this effect. It's this line in plugin:
input.val(buffer.join(''));
This plugin fully rewrites the value of an input on each button press.
Can anybody advise a solution of how to deal with this behavior? (i mean how to prevent keyboard from switching to default on input value rewrite)
P.S. Not all phones behave like this. And not all version of browser does.
My test "stand":
HUAWEI P2-6011 (android version 4.1.2)
P.P.S. Please don't suggest becouse it works for digits only, but i need spaces too. If i switch pattern to something like '^[0-9 ]+$' - problem is not solved.
I have designed an HTML5 page which consists of a input box of type email. This HTML5 page will be displayed in Android application in a webview.
<input type="email" autofocus id="emailid"/>
The problem I'm facing is that Android doesn't show the email type keyboard which has the "#" and ".com" symbol by default.
How to force Android to display email type keyboard using any of these?
Thanks in advance :)
Currently, HTML5 is not fully supported on devices running 2.2 or below.
These are not supported:
input type=search
input type=tel
input type=url
input type=email
input type=datetime
input type=date
input type=month
input type=week
input type=time
input type=datetime-local
input type=range
input type=color
input type=checkbox
input type=image
textarea
select
datalist
keygen
output
progress
field validation
form validation
APIs
Spellcheck attribute
Session history
Geolocation
Device Orientation
FileReader API
Local Storage
Access the camera
Full Screen
And the confirmation: http://www.petefreitag.com/item/768.cfm
Try running your app on ICS or JB and it should work.
Try to detect version of Android OS on server and to the next:
1) if OS = ICS or above => use native html 5
2) if OS < ICS => show custom html keyboard
Also for OS < ICS in your app disable soft keyboard.
Keyboards are completely pluggable in Android - and therefore somewhat unpredictable. Device manufacturers almost always ship a custom keyboard (which can introduce problems, For example: I've seen some HTC keyboards not handle IME_ACTIONS). Also, users are free to download and use many different keyboards from the Play Store. Certain keyboards may not have an email style - maybe because the developers didn't think of it, or maybe because it's not appropriate. For instance: Something like Graffiti keyboard might legitimately ignore the email style completely?
I believe the best you can do is handle the cases that are supported. If >=ICS supports the input type="email" and older versions don't, at least over time your user base should shift towards a higher percentage of users getting the behavior you want.
I don't know what your app looks like, but another option if you really want the # sign and .com keys to be visible would be to use a hybrid approach where you add only those keys to your html and allow users to tap those or use the normal pluggable Android keyboard for everything else (or # signs and .com's also - if their keyboards include it)
I have a login screen on my app which accepts a CPF as login (CPF is an unique number identification that every Brazilian citizen have, e.g: 10546819546), but it can also accept passport numbers as the login, and these may have letters on it.
My problem is that I want the keyboard, when it pops up, to show to number/symbols "view" before the default alphabet one. Changing the inputMethod to phone or number does not solve my problem, because as I said, the login may contain letters.
I've seen some explanations to questions somewhat similar to mine but all of them either didn't solve my problem or it was too overcomplicated.
This is merely a small adjust to slightly improve user experience and entertain me developing the app, so if the solution is something like "override the default keyboard, make a custom component" etc, I'll just leave it alone.
TL;DR: I want to show the number/symbol soft keyboard before the letters one.
Unfortunately when it comes to the soft keyboard you are somewhat at the mercy of whoever made the one the user has their device set to. Lots of devices come pre-loaded and defaulted to the swype keyboard. But many others have soft keyboards that were made by the manufacturer of that device. It it up to whoever created it to decide how the keyboard reacts to the android:inputType that you pass to it. It is possible that some of the ones out there right now actual have the behavior you are looking for when you set them to number or phone. I just checked it out on my sidekick and found that it was the same as yours both number and phone provided no way to input letters.
I have an enterprise Flex web application, served up over https, that runs fine on Flash player 10.0 and beyond on a desktop computer/browser.
However, when I run it from my HTC Incredible with Android 2.2 the app loads fine, but there is no on-screen keyboard and so I cannot log in. I can see the blinking cursor inside the username and password text fields. I can switch between them. I can even hit the login button and see an authentication error!
According to Adobe this should Just Work. Any ideas? I wanna show off our spanking new app to strangers at the bus stop!
Seems the problem is different implementations of the keyboard in the browser. See the comment from Adobe here as they shut the bug as unfixable: https://bugs.adobe.com/jira/browse/FP-5704
I have the same problems on a Galaxy S2 - though manually forcing the keyboard up here isn't an option as the address bar automatically gains focus.
Mobile Text Input
Flash Player 10.1 provides support for use of native device virtual keyboards with TextField support if no physical keyboard is detected. A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text.
The spark components in Flex 4 are not currently optimized for mobile. The next release of Flex codenamed "Hero" will provide mobile optimized skins for the spark TextInput/TextArea components. These skins are based on TextField and they are also optimized for performance with ActionScript skins and a more appropriate default size. Text support in the current Hero preview release is minimal, but the final release will be more robust, for example supporting scrolling in a TextArea. Check out the spec for more information: http://opensource.adobe.com/wiki/display/flexsdk/Mobile+Text+Components
It's probably worthwhile to note that the mobile features in Hero are designed with standalone mobile applications in mind, not browser-based applications. That said you might be able to grab those mobile skins and try using them in a browser-based Flex application compiled with Hero.
have you tried republishing your work strictly for 10.1? i believe that any applications which support versions of Flash prior to 10.1 are seen as Flash Lite on mobile devices, which may (or may not) be the problem.
it's worth a try.
Not a programming solution, but long press on the menu button brings up the keyboard if it doesn't pop up by itself (at least on my HTC Desire, 2.2 android).
Device: Kindle Fire
I had the same problem. My mathlab uses flash for homework assignments, and I could not access my keyboard for input. Until I found this.
Download and Install "Keyboardflash_1.0.0.apk" on your Android device.
go to the flash program in your browser
run the "Game Keyboard" app and click "Tap here to call out keyboard after exit"
return to your browser
You will notice I did not perform the direction the app gives you because the kindle fire is not compatible with those steps. Maybe it is with your device.
You may have trouble getting this to work with a browser app like "Dolphin"
Your Welcome :)
and respect the developer
Gamepad is also on the android market.