When developing mobile apps, especially multi-platform types with Adobe Air, there are times when you need to use WebView solutions to show some online content. HTML is improving everyday and although it has tried to keep its functionality the same across different platforms, it has always been partially unsuccessful. In post-mobile era, the problem was within different browsers but today, you need to be careful about new differences being introduced by mobile operating systems too, namely Android and iOS. I this post, we’ll concentrate in HTML input type tag and compare them with each other using Android and iOS WebView. As a multi-platform solution, we will use Adobe Air and because of that, we are using the RichWebView ANE. So let’s see how to control the virtual keyboard layout for our HTML input fields.
Before talking about the differences, let’s have a brief look at input type tag in HTML. You can learn more about it here http://www.w3schools.com/tags/att_input_type.asp If you have a web form in your RichWebView content, user can touch on different input fields and type in her information but if you are using the type tag, you will be able to tell the soft-keyboard how it should open. For example, if you want a user to enter her mobile number, you can open the telephone type for the keyboard which will have only numbers on the keyboard. This feature will make your web form look a lot more user-friendly and will be very simple for your users to interact with your content.
First, let’s name the most common types which act similar in both Android and iOS. Here’s a quick list. (Of course you can find more types in the given link to w3schoolds above. These are just an example)
As you can see in the screenshot, the keyboard fields are presented to your users in a way to let her easily find the necessary keys she would need while filling in the form element.
Second, we have some types which work the same but look different depending on which OS your form is running in. The most common samples are shown in the screenshots below.
And finally we have patterns which do not work on the Android side unfortunately. (At least for now)
<input type="text" pattern="\d*" value="">
So, when you are using RichWebView in your AdobeAir project, if you need to do something differently based on the current OS, all you have to do is to call airBridge.OS which will return either android or ios.
Saying that, you must be very careful about when you are checking this variable! The best time to do this check is after your page is fully loaded. Because the AirBridge.js will not be injected into your html content unless your html page is completely loaded first.
How to control the virtual keyboard layout in iOS and Android using JavaScript and HTML?
When developing mobile apps, especially multi-platform types with Adobe Air, there are times when you need to use WebView solutions to show some online content. HTML is improving everyday and although it has tried to keep its functionality the same across different platforms, it has always been partially unsuccessful. In post-mobile era, the problem was within different browsers but today, you need to be careful about new differences being introduced by mobile operating systems too, namely Android and iOS. I this post, we’ll concentrate in HTML input type tag and compare them with each other using Android and iOS WebView. As a multi-platform solution, we will use Adobe Air and because of that, we are using the RichWebView ANE. So let’s see how to control the virtual keyboard layout for our HTML input fields.
Before talking about the differences, let’s have a brief look at input type tag in HTML. You can learn more about it here http://www.w3schools.com/tags/att_input_type.asp If you have a web form in your RichWebView content, user can touch on different input fields and type in her information but if you are using the type tag, you will be able to tell the soft-keyboard how it should open. For example, if you want a user to enter her mobile number, you can open the telephone type for the keyboard which will have only numbers on the keyboard. This feature will make your web form look a lot more user-friendly and will be very simple for your users to interact with your content.
First, let’s name the most common types which act similar in both Android and iOS. Here’s a quick list. (Of course you can find more types in the given link to w3schoolds above. These are just an example)
As you can see in the screenshot, the keyboard fields are presented to your users in a way to let her easily find the necessary keys she would need while filling in the form element.
Second, we have some types which work the same but look different depending on which OS your form is running in. The most common samples are shown in the screenshots below.
And finally we have patterns which do not work on the Android side unfortunately. (At least for now)
So, when you are using RichWebView in your AdobeAir project, if you need to do something differently based on the current OS, all you have to do is to call airBridge.OS which will return either android or ios.
Saying that, you must be very careful about when you are checking this variable! The best time to do this check is after your page is fully loaded. Because the AirBridge.js will not be injected into your html content unless your html page is completely loaded first.
Enjoy building Adobe Air apps.
MyFlashLabs Team
Share this:
Related