We Keep Coding

Prevent negative numbers but allow decimals in input

The code below prevents negative numbers in input for numbers but does not allow me to enter decimals if I clear input and try to enter let's say 0.41
<input class='input2' oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null" type='number' step='0.1' id='success' />
Update
The code below allows decimals and prevents negative numbers but it does not allow me to place any condition. I also want to have one more condition of value can't be greater than 1: max = "1" not working
<input class='input2' min="0" max = "1" onkeypress="return event.charCode != 45" type='number' step='0.1' id='success'/>

var input = document.getElementById("success");
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
if (input.value < 0)input.value = -input.value
if(input.value > 1)input.value = 1
}
});
<input class='input2' min=0 max=1 type='number' step='0.1' id='success' />

jQuery automatically move to next input with max reach value

I would like to do move to the next input with last value. For example I want to enter credit card number and each number have max 4 digit capacity if digit is more then 4 then it'll automatically move to the next input with last added value.
For example I want to add 12345 so here 1234 will add in first input and 5 will automatically move to the next input.
1234 5
I have tried using following way , automatically move to next filed is work but not move last value.
$("#card3").bind("keypress", function (e) {
var error = [];
var card3 =$("#card3").val();
if ( card3.length > 3 ) {
error.push('<p>Allow digits only(0 - 4).</p>');
if (this.value.length == this.maxLength) {
$('#card4').focus();
}
}
I am going to add 12345 so 5 automatically move to the next input.

Modifying the dupe https://stackoverflow.com/a/40221557/295783 to handle paste
If you do not NEED to handle paste, then the dupe will work for you since you cannot enter the numbers without the number after the max going to the next field
Test the below by pasting in 16 digits in the first field OR type one digit at a time
$("[data-max]").eq(0).on("input", function() {
const val = this.value;
if (val.length === 16) {
const re = new RegExp(`.{${4}}`, "g")
const chunks = val.match(re)
chunks.forEach((chunk, i) => $("[data-max]").eq(i).val(chunk))
}
})
$("[data-max]").on("input", function() {
if (this.value.length >= this.dataset.max) {
if (this.nextElementSibling) this.nextElementSibling.focus();
}
})
$("[data-max]").last().on("input", function() {
this.value = this.value.slice(0, 4)
})
[data-max] {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-max="4" />
<input type="text" data-max="4" />
<input type="text" data-max="4" />
<input type="text" data-max="4" />

Here is where the problem is
if (this.value.length == this.maxLength) {
$('#card4').focus();
}
this.maxLength returns undefined therefore the block is never run.
Try
if (this.value.length == 4) {
$('#card4').focus();
}
You might want to add and retrieve maxLength value from input attribute
<input data-max-length="4" />
if (this.value.length == $(this).data('max-length')) {
$('#card4').focus();
}

Textbox numeric with still character e input and negative integers with javascript

I have a textbox with numeric inputs. Here is my javascript set to numeric textbox. But when I try to input letters, "e" is allowed. Problem: What I want to do is no letter should be allowed, only numeric numbers and no negative integer.
HTML:
<input type="numeric" id="usrid" name="usrid" placeholder="Enter number">
Javascript:
$(document).ready(function() {
$("#usrid").numeric();
});

You can use the type="number" and min=0 attributes in your input to enforce validation on these fields:
<input type="number" id="usrid" name="usrid" min=0 placeholder="Enter number">
However, this won't prevent input of negative or non-numeric characters into the input field. For that you'll need to bind a javascript event:
$('#usrid').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});

you can try this
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
in this page you can find more example about of limit of number, in html
http://www.w3schools.com/tags/att_input_max.asp

If you want to take only the number input then input type should be number like following
<input type="number" id="usrid" name="usrid" placeholder="Enter number">
but it takes the letter 'e' which is stands for exponential value.Better you have try the following which use js to validate the input using on 'keypress'
HTML code:
<input type="input" id="usrid" name="usrid" placeholder="Enter number">
JavaScript Code:
<script type="text/javascript">
$(document).ready(function() {
$('[id^=usrid]').keypress(validateNumber);
});
function validateNumber(e) {
var key = window.e ? e.keyCode : e.which;
if (e.keyCode === 8 || e.keyCode === 46
|| e.keyCode === 37 || e.keyCode === 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>

Show Input tag(textbox control) with two digit format in HTML5

How can I make an input tag, that always accepts two digits? like 01, 02, 03 etc up to 24. A leading zero should be present in case of single digits(0 to 9)
<input id="hourInput" type="number" min="1" max="24" step="1" />

Unfortunately it is not possible, in pure HTML5, to achieve this. Javascript will be required...
<input id="hourInput" type="number" min="1" max="24" step="1" onchange="if(parseInt(this.value,10)<10)this.value='0'+this.value;" />
EDIT:
Since this answer seems to get good trafic, I'd like to add the fact that the approach I have suggested is a naïve way to do it and will only correctly work with a min attribute higher than -9. If the number goes lower, the 0 will still get added resulting in 0-234 when the user enter a negative value of 234.

There is no native way to do that. However you can use oninput event to format.
<input id="hourInput" type="number" oninput='format(this)' min="1" max="24" step="1" />
Javascript
function format(input){
if(input.value.length === 1){
input.value = "0" + input.value;
}
}
http://jsbin.com/dedixapasi/edit?html,js,output

You can also do using JQuery like following:
$(document).ready(function() {
$("#hourInput").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 ) {
}
else {
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
$("#hourInput").keyup(function(event) {
var str = $('#hourInput').val();
if(str > 24)
{
$('#hourInput').val(str.substring(0,str.length - 1));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="hourInput" type="number" min="1" step="1" />
Hope it helps.

function format(input){
if(input.value < 0) input.value=Math.abs(input.value);
if(input.value.length > 2) input.value = input.value.slice(0, 2);
$(input).blur(function() {
// if(input.value.length == 1) input.value=0+input.value;
// if(input.value.length == 0) input.value='01';
//* if you want to allow insert only 2 digits *//
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="number" step="1" oninput="format(this)">
It works for me... hope for you as well :)

Javascript to check input value

I am looking for a javascript function that when using onblur it validates that the text input is a number only with no decimal points or special characters. I have been able to find a few things, but none of them have worked thus far.
Here's what I have for the input fields:
<tr>
<td width="312"><strong>Cash on Hand</strong></td>
<td width="188">$
<input type="text" onchange="updateassets()" value="0" maxlength="11" name="CashOnHand" /></td>
Any help would be greatly appreciated.

Use below method onKeyUp event, this will not allow any characters on input field
function numericOnly(e)
{
var val = e.value.replace(/[^\d]/g, "");
if(val != e.value)
e.value = val;
}
Input field code
<input type="text" onchange="updateassets()" onKeyUp="numericOnly(this)" value="0" maxlength="11" name="CashOnHand" />

I like to separate the structure (HTML) from the function (JS). That's why there's no "onchange" attribute in the input element.
HTML
<input type="number" name="cashOnHand" value="0" maxlength="11" />
JS
function checkInputInteger() {
// Check if the input value is an integer
if (this.value == parseInt(this.value)) {
// The value is an integer
console.log('Input ' + this.name + ' is an integer');
}
else {
// The value is not an integer
console.log('Input ' + this.name + ' is not an integer');
}
}
// Get the input from DOM (getElementsByName returns a list)
input = document.getElementsByName('cashOnHand')[0];
// Bind the blur event to checkInputInteger
input.addEventListener('blur', checkInputInteger, false);

HTML
<form>
<input type="text" id="txt" />
</form>
JS
(function(a) {
a.onkeypress = function(e) {
if (e.keyCode >= 49 && e.keyCode <= 57) {}
else {
if (e.keyCode >= 97 && e.keyCode <= 122) {
alert('Error');
// return false;
} else return false;
}
};
})($('txt'));
function $(id) {
return document.getElementById(id);
}
Hope it helps you

Given:
<input onchange="updateassets()" value="0" ...>
you can make life easier by passing a reference to the element to the function using this:
<input onchange="updateassets(this)" value="0" ...>
and the validation function can be:
function validateIsInteger(element) {
if (/\D/.test(element.value)) {
// the element value contains non–digit values
} else {
// the element value is only digits
}
}
Using the change event is a good idea, as if the value hasn't changed, you don't need to check it.