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.
Related
OK, I've been reading a fair bit about this and am running into a few limitations... so here goes.
Consensus seems to be that a 'tel' input is the easiest/best way to force filtering of input to numeric input on mobile devices. Mainly as it triggers the numeric keypad.
I'm trying to use a 'tel' input field in HTML5 to prompt a user for their numeric PIN number inside a form for submission. Here is the input code:
<input type="tel" pattern="[0-9]" name="PIN" value="" maxlength="10" placeholder="Numeric PIN only" autofocus required />
A couple of things:
How to get the keyboard to show when the page loads, and
how to mask the values like a type="password" input field
The keyboard shows when I tap on the input, however I'd really like it (or any other keyboard) to pop up when the page loads.
I'm hoping for a 'light'/native solution if that is at all possible as I'm working with low bandwidth requirements.
Many thanks in advance.
1) To get the keyboard to show set the focus when the page loads to your text input field using javascript. You may need to add a delay:
setTimeout(function_that_sets_input,5000);
Note: This solution has certain issues on iOS 5 and prior. Sometimes the setTimeout doesn't get fired. A more robust solution is to call the javascript method from Obj-C code in viewDidAppear (or similar).
2) See this answer. You're going to want to set the pattern to:
<input type="password" pattern="[0-9]*" ... />
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
iPhone's Mobile Safari seems to recognize most new HTML5 input types, in particular the ones detailed here, such that tapping in an input declared like so:
<input type="number" id="myInput" value=""/>
presents the iPhone's numeric keypad.
However, in the Android browser, the usual text keypad is shown when tapping the same input.
Is there a workaround for the Android browser or an alternative attribute that can be set or even a library I can include to have the android browser respect this setting?
if you specify on the input element the type as "number" it will automatically open with the numeric keypad
example
<input type="number" pattern="[0-9]*" name="amount_zip" value="loading.."></input>
the pattern attribute is for iPhone,
you can also get more info on inputs here
I just tried <input type="number"> with a Xoom (Honecomb, I think) and it does cause the numeric keypad to open, which is great, but the field only appears to allow positive integers. Hitting the '-' and '.' keys on the keypad have no effect. Adding relevant min / max attributes or setting a proper pattern don't seem to have any effect. In other words, if you want the keyboard to appear and your numeric field only needs to be zero or a positive integer, this will work. Otherwise (floats, negative numbers), you'll have to use text.
(I realize I'm not answering the question here, I would like to have left this as a comment for the previous answer, but can't figure out how)
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.