HTML number input issues with decimal seperator - javascript

I've some issues with decimal input on iOS using the numeric keypad. I have the following HTML:
$('#number').keyup(function() {
$('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" inputmode="decimal" id="number">
<p>
Input as number:
<div id="log"></div>
</p>
This is working as expected in Chrome browser, Android etc., but on iOS there is some issues. If I set the Region to e.g. Denmark (comma decimal seperator) but the Language to English (UK) (point decimal seperator), the number pad gives me a comma decimal seperator, but I seems that the HTML/JS does not support this. If I input e.g. 12,3 the value of the input field becomes empty when I use the comma.
How can I fix this?
When Region is Denmark and Language is Danish, it's all working as expected.
The code and demo is available on this StackBlitz: https://decimal-input-ios.stackblitz.io

I found some workaround, you can replace , with . every time that it is being typed:
let prevNum = "";
$('#number').on("keyup", function (e) {
if (e.keyCode == 188) {
$(this).val(prevNum + ".");
}
prevNum = $(this).val();
$('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});

Can you please try to add lang="en" it should change by adding a lang attribute
<input type="number" inputmode="decimal" id="number" lang="en">

This is a cheat, but after reading several similar posts about it, I'm not sure you have too many options. If you don't need the (usually inconsequential) up/down ticks, you can just use a 'text' input with a pattern. The pattern will tell iOS to use the number pad despite this being a 'text' input.
$('#number').keyup(function(evt) {
$('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" inputmode="decimal" id="number" pattern="[0-9.,]+">
<p>Input as number:</p>
<div id="log"></div>

I cannot test since I do not own any IOS device...
But you said:
When Region is Denmark and Language is Danish, it's all working as expected.
So why not just change the whole page language on that specific input focus and restore it on blur? That would be:
$("#number").on("focus", function(){
$("html").attr("lang", "da");
});
$("#number").on("blur", function(){
$("html").attr("lang", "en");
});
It worths a try ;)

Use parseFloat() to make the value a float
$('#number').keyup(function() {
$('#log').prepend('<p>Input: ' + parseFloat($(this).val()) + '</p>');
});
<html lang="en-GB">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" inputmode="decimal" id="number">
<p>
Input as number:
<div id="log"></div>
</p>
</html>

Related

Format input with regex

I have a input field which is a percent value, i am trying for it to display as % when not focused in and when focused in it will loose the %, also the input field needs to avoid chars on it. I'm using a type"text" input field with some jQuery.
$(document).ready(function() {
$('input.percent').percentInput();
});
(function($) {
$.fn.percentInput = function() {
$(this).change(function(){
var c = this.selectionStart,
r = /[^0-9]/gi,
v = $(this).val();
if(r.test(v)) {
$(this).val(v.replace(r, ''));
c--;
}
this.setSelectionRange(c, c);
});
$(this).focusout(function(){
$(this).val(this.value + "%");
});
$(this).focusin(function(){
$(this).val(this.value.replace('%',''));
});
};
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="percent" value="2"></input>
<input class="percent" value="4"></input>
on the snippet it does not behave the same as on my app, not sure why but the intended result is for it to erase any char that is not a digit or "only" 1 % sign.
Would change this approach only slightly:
use keypress (and eventually paste) to block invalid characters
use parseFloat (or int if you don't allow decimals) to remove leading 0's --> '00009.6' => '9.6%'
However I'd use <input type="number"> (btw: </input> closing tag is invalid HTML)
these days with a % sign just after the input. (number type has better display on mobile)
(function($) {
$.fn.percentInput = function() {
$(this)
// remove formatting on focus
.focus(function(){
this.value = this.value.replace('%','');
})
// add formatting on blur, do parseFloat so values like '00009.6' => '9.6%'
.blur(function(){
var r = /[^\d.]/g,
v = this.value;
this.value = parseFloat(v.replace(r, '')) + '%';
})
// prevent invalid chars
.keypress(function(e) {
if (/[^\d.%]/g.test(String.fromCharCode(e.keyCode)))
e.preventDefault();
});
};
})(jQuery);
$(document).ready(function() {
$('input.percent').percentInput();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="percent" value="2%">
<input class="percent" value="4%">
It is my understanding that the snippet you provided is the desired behavior, but your app isn't behaving in the desired way you've demonstrated. So, the question is: what's different between this snippet and your app? Does your app throw any errors into the console?
When I encounter problems like this, I'll usually run my page through an HTML validator. Sometimes, invalid html can corrupt more than you'd think.
When I put your html into a standard HTML5 template, the validator finds these errors in your snippet:
Basically, it is saying that you don't need </input>. Do this instead:
<input class="percent" value="2">
<input class="percent" value="4">
Perhaps this is completely unrelated, but I thought I'd mention it. I'd put your actual app through the html validator to see if you find more errors that could be ultimately corrupting your javascript's ability to achieve the desired behavior showcased by your snippet.

Replace after every fourth input value with space jquery?

So what i want to achieve is that after every fourth be replaced with space.
Like if i start writing on keypress on input 1234123412341234,
I want to achieve 1234 1234 1234 1234, when user types.
<input type="text" id="number" maxlength=19 />
And here is js
$('#number').on('keypress', function() {
if (this.value.length >= 4) {
this.value = this.value.slice(0, 4) + ' '+this.value.slice(5, 9);
}
So this code only creates one space after fourth, 1234 123412341234.
But how to do for the rest of input value ? Thanks in advance.
You could use replace and look for four characters.
console.log('1234123412341234'.replace(/.{4}/g, '$& '));
This might be what you are looking for
Note it bugs a bit when you type fast, i'm fixing it atm <-- Should be fine
$(function(){
$("input").keydown(function(){
if ((($(this).val().length+1) % 5)==0){
$(this).val($(this).val() + " ");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />

Replacing symbols on keyup

I have stumbled across on a problem I do not understand why it's even happening (not working).
What I have to do is just to replace 1 's amount value, for some reason I just can't lol.
When user enter amount, in case he enters ",", I have to change it to "." Instantly - live.
Here is the sample..
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val().replace(",", ".");
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
It's because you did not set the value of the textbox after changing its value. See working code below:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var $this = $(this), amount = $this.val();
$this.val(amount.replace(",", "."));
console.log('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
You computed the modified string but do not set it back to the field. If I understand your problem correctly this should work for you:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val(amount.replace(",", "."));
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
Note that .val() gets a value while .val(string) sets the value of the field to the specified string.

Regular expression to restrict 'n' digits before and after decimal point

I need a regex for restrict 10 digits before decimal and 2 digits after decimal point. i have tried with this
if (!(/^\d{1,10}(\.$|\.\d{1,2}$|$)/).test(value)) {
event.preventDefault();
event.stopPropagation();
}
<input id="input" type="number" />
It is working fine for input type text.But it is not working for type number.
Working Fiddle
Please help me on this
To restrict Decimal places before and after decimal this should work:
function ValidateDecimalInputs(e) {
var beforeDecimal =3;
var afterDecimal = 2;
$('#'+e.id).on('input', function () {
this.value = this.value
.replace(/[^\d.]/g, '')
.replace(new RegExp("(^[\\d]{" + beforeDecimal + "})[\\d]", "g"), '$1')
.replace(/(\..*)\./g, '$1')
.replace(new RegExp("(\\.[\\d]{" + afterDecimal + "}).", "g"), '$1');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id = "textBox" onclick="ValidateDecimalInputs(this)"/>
This should work.
if(! (/^[0-9]{10}\.[0-9]{2}$/).test(1234567890.12)) {
}
Just use this regex /^[0-9]{10}\.[0-9]{2}$/ in your code to verify if value is 10 digits before decimal and 2 after.
Parameters
oninput: Detect immediate changes to the input tag.
max: Set the maximum value.
min: Set the minimum value.
type: Set what type of input tag you want.
value: Set the current value.
step: Set the amount to ascend or descend by.
//(function(object){object.value=parseFloat(object.value).toFixed(2);})(this)
//(function(object){var val=object.value;object.value=val.slice(0,val.indexOf('.')+3);})(this)
<input id="input" oninput="(function(object){object.value=parseFloat(object.value).toFixed(2);})(this)" type="number" value="0.00" step="0.01" min="0.00" max="9999999999.99" />
JSFiddle
value= (value.substr(0, value.indexOf(".")) + value.substr(value.indexOf("."), 2));
this will work as it will give all values before "." and only 2 values after "."
This worked for me, even with number type.
JQuery
$("body").on("keyup", ".patternCheck", function(){
if(this.value.match(/^[0-9]{1,10}[.]{1}[0-9]{1,2}$/) == null)
{
$(this).val($(this).attr("pval"));
}
else
{
$(this).attr("pval", $(this).val());
}
});
HTML
<input type="number" value="0.0" pval="0.0" class="patternCheck">

how can a call a function when text value of my textbox changes using jquery?

I have 3 input fields which have values prepopulated and a constant value of total hours 200. I am calculating the avghours as totalhours/datediff of date1 and date2.
My Question is if i change the value of date2 then i want the avghours value to change accordingly. I am not sure which event should be used to fire the method which does the calculation
<input type="text" id ="avghours"/>
<input type="text" id ="date1"/>
<input type="text" id ="date2"/>
Javascript code
function getavg()
{
$('#avghours').val()=totalhours/datediff($('#date2').val(),$('#date1').val(),'day');//datediff is userdefined function to get the datedifference
}
change will fire only if the focus is lost so that might not be possible is there anyother event that i can use.
Thanks
Prady
change
$('#avghours').val()=totalhours/datediff($('#date2').val(),
$('#date1').val(),'day');
to
$("#date2").bind("keyup blur change mouseup",function () {
var d = parseInt(datediff($('#date2').val());
var v = (totalhours/d) + ' ' + $('#date1').val() + ' day'; <-- mergestrings
$('#avghours').val(v);
});
assign via the function instead of the right hand.
If you want to update it immediately when the user types you could use the keyup event.
you could try keypress so...
$('#date2').keypress(function() {
//do calculating average logic here
});
then this would pick up when the value of the textbox has been changed
You can use the .change() event for this.
$("#date2").change(function(){
});
[![<html>
<head>
<title></title>
<script>
function multy(val)
{
alert(val.value+"--"+val.id);
}
</script>
</head>
<body>
<input id="txtdemo" type="text" onchange="multy(this);"></br>
<input id="txtdemo" type="text" onchange="multy(this);">
</input>
</body>
</html>][1]][1]

Categories