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 />
Related
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>
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.
i don't know much regex so if some one can help me with this it would be great i have a input box and a button.
if the user enters A12345678 the first character should always be A and the rest should always be numbers and altogether it should have less then 10 characters
<input type="textbox" id="id" />
<input type="submit" id="submit" />
<script type="text/javascript">
/*Check if ID is correct */
$('#id').keyup(function(){
var id= $(this).val();
if(id == /*'A12345678' */{
//enable button
}else{
// disable button
});
</script>
i would appreciate if some one could help me out a bit with this
Here ya go ^(A\d{1,9})$;
^ will start the verification at the beginning of the string
() encapsulates your result. not necessarily needed, but I like to have them
A will match the uppercase character
\d{1, 9} will match 1 to 9 numbers following the letter A
$means the end of the string
Use:
if(id.match(/^(A\d{1,9})$/)) {
// do stuff
}
Hope this helps.
Watch it work: https://jsfiddle.net/ppmr12v6/
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">
I want to transform a string like "0800" automatically to "08:00".
So I thought that way: If I type in the running program 2 digits, after typing the third the colon should automatically appear between the second and third digit. Without refreshing or something.
Has anyone a solution for me?
<input type="text" id="input" />
<script type="text/javascript">
document.getElementById("input").onkeydown = function(e) {
if(e.keyCode != 8 && this.value.length == 2) {
this.value += ":";
}
}
</script>
Working demo available here.