Currently I am using WebView in my application to load WebPage. WebView has one TextBox which only allows Numeric value to enter.
I have done JavaScript validation and restrict user to enter any other character other than Number.
It is working in WebPage but when TextBox is focused in Android WebView then It is not showing Numeric Keyboard.
Instead of that it is showing Simple Keyboard
What can be done to show Numeric Keyboard?
Finally I have solved it by specifying
<input type="number" />
instead of
<input type="text" />
in Web-form.
You need to set appropriate input type attribute:
http://www.w3schools.com/tags/att_input_type.asp
Related
I have an HTML input. The input is on the web page which is opened in Chrome on an Android phone.
I want an option to let the user to see a numeric keyboard when he starts entering the value. But at the same moment, I want him to have a possibility to enter alphanumeric characters.
I cannot use type="number" because it doesn't allow entering letters.
I cannot use type="text" because it opens alpha keyboard by default and a user have to switch to numeric keyboard.
So the option I'm trying to find is when the standard alpha-numeric keyboard got opened but the digits input is already selected (Like when you press ?123 on the standard keyboard).
I have tried to use type="tel" but I don't understand how to switch to letters from numbers.
I'm using Cordova, so if there's no option to do this using HTML I could use native plugins if you suggest me any of them.
I use cordova so if there's no HTML way to do things I'm ready to integrate any sort of plugin, if you could suggest me anyone.
TL;DR: This is what I want to see as a default keyboard layout. Is it possible?
You probably want to take a look at this: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">
The inputmode will work on the latest Android browsers, and the pattern is a hack for iOS. Pay special attention to the article where they talk about iOS not allowing the user to change keyboards.
Hope it helps.
Full solution to your problem using JavaScript.
The trick is to create a second number input, which you overlap on top of your text input using css.
<style type="text/css">
/* hide number spinners on inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
.hidden-number {
margin-top: -26px;
}
</style>
<form method="post" action="submit.php">
<input class="form-control" type="text" name="input_name">
<input class="form-control hidden-number" type="number" id="input_name">
</form>
Using JavaScript, when your number input gains focus it will trigger the keyboard that you want. You will then have to remove the type='number' attribute, which would prevent you from entering anything other than numbers. Then transfer whatever content is in your text input to the number input. Lastly, when the number input loses focus, transfer its contents back to the text input and replace its type='number' attribute.
<script type="text/javascript">
$(".hidden-number").on("focus", function(){
$(this).removeAttr("type");
var text_input = $("input[name="+this.id+"]");
$(this).val(text_input.val());
text_input.val("");
});
$(".hidden-number").on("focusout", function(){
var text_input = $("input[name="+this.id+"]");
text_input.val($(this).val());
$(this).attr("type", "number");
});
</script>
You cannot do this as the keyboard layout provided to the user is based on the input type of your input. It would be a bad UI principle to show the user a numeric keypad, when he can in reality enter alphanumeric characters. The tel input type won't let you change the keyboard to a numeric one, since it is specifically designed to accept only phone numbers.
So if you want to let the user enter alphanumeric characters in your input, you should not set the keyboard to be numeric. See the example below:
<input type="text" name="valText"/>
If on the other hand you want to allow the user to only enter numeric characters, then you should set the input type to number as below:
<input type="number" name="valNumber"/>
A workaround to this would be to create multiple inputs and set their type to whatever you want the user to enter in that particular field. You can then concatenate them to a single value to save them in that way. However you will need to save them as a concatenated String which contains both characters and numbers.
You can also take a look at the link here to check the different input types you can use in case you find one of them more of use to you. What you must remember however is that the input type will define the keypad layout. You may also take a look at this for a better understanding.
I'm using jquerymobile, but can't get the keypad to only show numeric keys (including decimals). Only default keypad is shown.I'm using phonegap,
I use
<input type="number">
the problem is that the numpad is shown but when i use
input {-webkit-user-modify: read-write-plaintext-only;}
the default keypad is only shown.
Any suggestion would be great.
Thankx.
use $('#<element-id>').focus();
I'm using the following code in my project and it's working fine:
"How to show and hide soft keyboard in Android"
However, I would like to replace the keyboard with the "number" keyboard. I don't want it globally, so I'm guessing I won't have to edit the xml file. It should only be numeric when I call it from the javascript.
You can get any kind of Keyboard when you tap an input depending on its type
For a numeric keyboard, you need to set its type to number
<input type="number" name="txtNumber"/>
The Tel type brings in a Numerical keyboard like in dial mode.
<input type="tel" name="txtNumber"/>"
only put type "tel" works for me in Cordova.
<input class="textbox-container" type="tel" name="identification" id="identification">
I need the keyboard change automatically from normal to numeric keyboard only for particular fields such as phone number, ZipCode etc. is foucssed.
I can be able to enter the details in fields in webview.
Can i make this possible in java code or html page design.
try to add such types of inputs in html
<input type="number" />
<input type="tel" />
this should opens numeric keyboard
I have designed a web app and it has a form which has one field below like,
phone:<input type="text">
When I touch this screen (selecting the textbox to enter the data), the qwerty keypad is enabled by default. It is with character after pressing shift I can enter numbers in the text field.
ex:
<select name="source" data-native-menu="true">
and
<select name="source">
The above example shows a lot of variation while selecting the options in Android mobile which I observed.
In the meantime, I am going to guess. Do you want to restrict the input to numbers? Does this help you?:
<input type="number" min="0" max="10">
(you can choose whatever min and max values you want or use only input="number")
That should force android to open the numeric keyboard instead of the full qwerty upon gaining focus.