Show Decimal Keyboard in HTML5 iOS 7 / iOS 8 - javascript

I just have a simple question after having searched for hours now: Is there any possibility to show the decimal keyboard in webbrowsers input fields? input type="number" only shows numbers but i need a comma or dot instead in the bottom left corner.
I tried anything, pattern, step etc., but nothing brings up the decimal keyboard. I only need the numbers and a dot or comma, no A-Z or a-z or anything else.
<input type="number" id="inputNumbers" pattern="[0-9]*" size="30" min="1" max="5">
This is what i get:
This is what i want:

Checkout inputmode="decimal" starting on iOS 12.2
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
https://caniuse.com/#feat=input-inputmode

https://github.com/mrchandoo/cordova-plugin-decimal-keyboard
Lets you configure the decimal character(instead of . you can change to , )

This works for iPhone and Android:
<input type="text" inputmode="decimal">
Results in this keypad with iPhone 10:
And with Android:

Try this:
EditText myEditText = (EditText)findViewById(R.id.myEditText);
myEditText.setInputType(InputType.TYPE_NUMBER_FLAG_DECIMAL);
Or:
<input type="tel" />
This is a bit of a hack:
<input type="number" step="0.01">
Might work depending on what you are trying to achieve when it comes to input values
This link might be useful:
Force iOS numeric keyboard with custom / currency pattern
Hope you come right!

Check this html code according to your pattern
<input type="text" pattern="[a-z]*">

Related

How to display decimal numbers with dot instead of comma in HTML Input tag type="number" in Google Chrome

I would like to know how can I use . to separate decimals in a HTML Input tag type="number" instead of , using Google Chrome (Version 89.0.4389.82) MacOs Catalina.
So far from what I've tried Firefox is the only browser which splits decimal numbers with .
Does anyone faced this issue?
Any ideas how to fix it?
<input type="number" value="1.5" step="0.1" min="0" />
Browser decimal separators differ according to the region. I think your issue is parsing the value for different regions( , and .)
Use valueAsNumber to extract the value
valueAsNumber (MDN Documentation)
double: Returns the value of the element, interpreted as one of the following, in order:
A time value
A number
NaN if conversion is impossible
window.addEventListener('DOMContentLoaded', (event) => {
const ageInput = document.querySelector('#age');
console.log('Age:', ageInput.valueAsNumber);
console.log('Type of Age:', typeof ageInput.valueAsNumber);
});
<input id="age" type="number" value="1.5" step="0.1" min="0" pattern="[0-9]+([,\.][0-9]+)?" />
Also added pattern for sake of completeness.

I want an input with a hidden digits

Could it be possible to have those conditions in my input ?:
1- Allow only digits to be entered.
2- Those digits be hidden like a password.
3- The numeric keyboard to pop-up on mobile browsers and not the general keyboard.
4- All this want to be cross-browser compatible.
<input type="number" name="pin-code">
You can try this one <input type="number" pattern="[0-9]*">
input[type=number] {
-webkit-text-security: disc;
}
Please see this jsfiddle

Looking to default to numeric keyboard on mobile but easily allow text input too [duplicate]

Is there a way to force the number keyboard to come up on the phone for an <input type="text">? I just realized that <input type="number"> in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.
I want to emulate the numeric-keyboard functionality of <input type="number">, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate input type that does that?
You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear.
See here for more detail: Text, Web, and Editing Programming Guide for iOS
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
As of mid-2015, I believe this is the best solution:
<input type="number" pattern="[0-9]*" inputmode="numeric">
This will give you the numeric keypad on both Android and iOS:
It also gives you the expected desktop behavior with the up/down arrow buttons and keyboard friendly up/down arrow key incrementing:
Try it in this code snippet:
<form>
<input type="number" pattern="[0-9]*" inputmode="numeric">
<button type="submit">Submit</button>
</form>
By combining both type="number" and pattern="[0-9]*, we get a solution that works everywhere. And, its forward compatible with the future HTML 5.1 proposed inputmode attribute.
Note: Using a pattern will trigger the browser's native form validation. You can disable this using the novalidate attribute, or you can customize the error message for a failed validation using the title attribute.
If you need to be able to enter leading zeros, commas, or letters - for example, international postal codes - check out this slight variant.
Credits and further reading:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
I have found that, at least for "passcode"-like fields, doing something like <input type="tel" /> ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting. For example, in a mobile application I developed for Hilton recently, I ended up going with this:
... and my client was very impressed.
<form>
<input type="tel" />
<button type="submit">Submit</button>
</form>
<input type="text" inputmode="numeric">
With Inputmode you can give a hint to the browser.
Using the type="email" or type="url" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type="tel".
There is a danger with using the <input type="text" pattern="\d*"> to bring up the numeric keyboard. On firefox and chrome, the regular expression contained within the pattern causes the browser to validate the input to that expression. errors will occur if it doesn't match the pattern or is left blank. Be aware of unintended actions in other browsers.
as of 2020
<input type="number" pattern="[0-9]*" inputmode="numeric">
css tricks did a really good article on it: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
For me the best solution was:
For integer numbers, which brings up the 0-9 pad on android and iphone
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />
You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
And add novalidate='novalidate' to your form element, if your doing custom validation
Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
I think type="number" is the best for semantic web page. If you just want to change the keyboard, you can use type="number" or type="tel". In both cases, iPhone doesn't restrict user input. User can still type in (or paste in) any characters he/she wants. The only change is the keyboard shown to the user. If you want any restriction beyond this, you need to use JavaScript.
There is an easy way to achieve this type of behaviour(like if we want to use text formatting in the input field but still want the numeric keyboard to be shown):
My Input:
<input inputMode="numeric" onChange={handleInputChange} />
Tip: if you want this type of behaviour(comma-separated numbers)
then follow handleInputChange implementation (this is react based so mentioned states also)
In 2018:
<input type="number" pattern="\d*">
is working for both Android and iOS.
I tested on Android (^4.2) and iOS (11.3)
<input type="text" inputmode="decimal">
it will give u text input using numeric key-pad
All of the posted answers trigger the number only keyboard, which is not what the OP was asking. The only way I've found to trigger the type='number' keyboard on a text input is to use CSS and JS.
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 can try like this:
<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">
But be careful: If your input contains something other than a number, it will not be transmitted to the server.
I couldn't find a type that worked best for me in all situations: I needed to default to numeric entry (entry of "7.5" for example) but also at certain times allow text ("pass" for example). Users wanted a numeric keypad (entry of 7.5 for example) but occasional text entry was required ("pass" for example).
Rather what I did was to add a checkbox to the form and allow the user to toggle my input (id="inputSresult") between type="number" and type="text".
<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>
Then I wired a click handler to the checkbox that toggles the type between text and number based on whether the checkbox above is checked:
$(document).ready(function () {
var cb = document.getElementById('cbAllowTextResults');
cb.onclick = function (event) {
if ($("#cbAllowTextResults").is(":checked"))
$("#result").attr("type", "text");
else
$("#result").attr("type", "number");
}
});
This worked out well for us.
try this:
$(document).ready(function() {
$(document).find('input[type=number]').attr('type', 'tel');
});
refer: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask

Mobile Number Masking using Javascript?

I want to use masking for Mobile Number in javascript.In this masking, I want to fix (+91) then user can input mobile number(10 digit number)
<label>Phone Number</label>
<input type="button" value="Turn on Mask" id="maskon" />
<input id="phone" type="text" value="" />
$("#maskon").click(function(){
$("#phone").mask("(+91) 9999-999999");
});
If I am using the given masking then I am able to put any digit in place of 9 instead of it I want to have (+91) as fixed.
Is there any idea to solve this problem?
Thanks in Advance!!
I do not think that there is an option for making first few digits fixed for mask plugin.
However you could also write keyup event for textbox and write a regex that verifies that first three digits are +91. You can use this regex for that. /(\+\d{2})/

Open Numeric keyboard on ASPX Wep page´(sample.aspx) when calling from Iphone and android mobile [duplicate]

I have a mobile website and it has some HTML input elements in it, like this:
<input type="text" name="txtAccessoryCost" size="6" />
I have embedded the site into a WebView for possible Android 2.1 consumption, so that it will also be an Android application.
Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML input element is focused?
Or, is it possible to set it for the whole application (maybe something in the Manifest file), if it is not feasible for an HTML element?
<input type="number" />
<input type="tel" />
Both of these present the numeric keypad when the input gains focus.
<input type="search" />
shows a normal keyboard with an extra search button
Everything else seems to bring up the standard keyboard.
IMPORTANT NOTE
I am posting this as an answer, not a comment, as it is rather important info and it will attract more attention in this format.
As other fellows pointed, you can force a device to show you a numeric keyboard with type="number" / type="tel", but I must emphasize that you have to be extremely cautious with this.
If someone expects a number beginning with zeros, such as 000222, then she is likely to have trouble, as some browsers (desktop Chrome, for instance) will send to the server 222, which is not what she wants.
About type="tel" I can't say anything similar but personally I do not use it, as its behavior on different telephones can vary. I have confined myself to the simple pattern="[0-9]*" which do not work in Android
inputmode according to WHATWG spec is the the default method.
For iOS devices adding pattern could also help.
For backward compatibility use type as well since Chrome use these as of version 66.
<input
inputmode="numeric"
pattern="[0-9]*"
type="number"
/>
This should work. But I have same problems on an Android phone.
<input type="number" /> <input type="tel" />
I found out, that if I didn't include the jquerymobile-framework, the keypad showed correctly on the two types of fields.
But I havn't found a solution to solve that problem, if you really need to use jquerymobile.
UPDATE:
I found out, that if the form-tag is stored out of the
<div data-role="page">
The number keypad isn't shown. This must be a bug...
Some browsers igoners sending leading zero to the server when the input type is "number". So I use a mixing of jquery and html to load a numeric keypad and also make sure that the value is sent as a text not as a number:
$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">
For a Numeric Keyboard with DECIMAL POINT
<input inputmode="decimal" type="number" />
Add a step attribute to the number input
<input type="number" step="0.01">
Source: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
input type = number
When you want to provide a number input, you can use the HTML5 input type="number" attribute value.
<input type="number" name="n" />
Here is the keyboard that comes up on iPhone 4:
iPhone Screenshot of HTML5 input type number
Android 2.2 uses this keyboard for type=number:
Android Screenshot of HTML5 input type number

Categories

Resources