html text input only 0 or 2 or 4 or 6 or 8 or 10 only.otherwise a blank space should be returned
function isNumberKey(evt) {
var regexExp = /[2,4,6,8]{1}|10/
return (regexExp.test(($('#evt').val())) ? evt ').val() : false);
}
<input type="text" name="T2" id="d1" size="5" maxlength="2" min=0 max=10 step="2" Onkeypress="return isNumberKey(this.value)">
Based on what I understood, I think this is what you are looking for.
exception being that the input value of "1" is valid.
<input type="number" min="0" max="10" value="0" step="2" onkeypress=" let satisfy = (/^(0|2|4|6|8|1|10)$/).test(this.value + event.key); if(!satisfy){this.value = ''} return satisfy;">
Related
I have this current if statement - which is inside a for loop:
// Validate Temperatures
if(inputs[i].name.startsWith("actual-temp") || inputs[i].name.startsWith("min-temp") || inputs[i].name.startsWith("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
What it does
Checks all inputs that has name starting with actual-temp, min-temp and max-temp and passes them into a function called validate
My HTML file
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
Question
Within my if statement - how can I grab all elements that startsWith() (as it is in the if statement currently) and ends with either -1 or -2? Or alternatively exclude inputs names that end with -3.
You can use regular expressions for your test
if (inputs[i].name.match(/^(actual|min|max)-temp-(1|2)$/)) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
Use str.includes
if(inputs[i].name.includes("actual-temp") || inputs[i].name.includes("min-temp") || inputs[i].name.includes("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
for (let item of my_list) {
if (item.charAt(item.length-1)!=="3"&&
(item.startsWith("actual-temp")|| item.startsWith("min-temp")||
item.startsWith("max-temp"))
) {
//logic goes here
}
}
when the first condition in the above if loop fails , javascript will not check the 3 items in OR statements (short circuiting comes into picture)
I have two input fields in my contact form, in both fields it's only possible to fill in a number. My question is, is there a way that the number in field 1 can never be higher than the number in field 2?
I have looked everywhere but can't find a solution. Is this even possible (with Javascript)? Hopefully somebody has a solution or can send me in the right direction.
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
function forceLimit(e) {
var limit = e.target.getAttribute("max");
if(e.target.value > limit)
e.target.value = limit;
}
function handleLimitChange(e) {
var limit = e.target.value;
var fieldOne = document.querySelector('#field-one');
if(fieldOne.value > limit) {
fieldOne.value = limit;
}
fieldOne.setAttribute('max', limit);
}
<form>
<input type="number" id="field-one" class="fieldone" onchange="forceLimit(event)" min="0" max="16" step="0.1">
<input type="number" id="field-two" class="fieldtwo" onchange="handleLimitChange(event)" min="0" max="16" step="0.1">
</form>
You can use jQuery to check that always the value in field 2 is greater or equal to field 1:
$('.fieldone').change(function(){
checkValue();
});
$('.fieldtwo').change(function(){
checkValue();
});
function checkValue(){
var maxValue = $('.fieldtwo').val();
if(maxValue > 0 && $('.fieldone').val() > maxValue){
$('.fieldone').val(maxValue);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
This is code
<input type="number" class="form-control" min="0" max="12" step="1" ng-model="input.hours" required>
<input type="number" class="form-control" min="0" max="60" step="5" ng-model="input.minute" required>
This is browser preview
I need to input hours as 08 and minutes 05 But visible 8 and 5.
How can do that?
If not clear, comment. Hope answer soon.
You can use ng-change to insert a 0 before the value each time it changes:
<input type="number" class="form-control" min="0" max="12" step="1" ng-model="input.hours" required ng-change="onChange(input.hours)">
<input type="number" class="form-control" min="0" max="60" step="5" ng-model="input.minute" required ng-change="onChange(input.minute)>
$scope.onChange = function(val) {
if (val < 10) {
val = '0' + val;
}
}
I would suggest to create a filter to add '0' before number if needed
https://stackoverflow.com/a/17648547/274500
This is frustrating!
When the input type is text and I gave maxlength as 5, it is not allowing me to enter more than 5 characters
<input type="text" maxlength="5" />
If I gave input type as number and I gave maxlength as 5, it is allowing more than 5 digits?
<input type="number" maxlength="5" pattern="[0-9]*" />
Am I missing something?
PS: This is for mobile responsive site!
Instead of maxlength use max
<input type="number" min="1" max="10000" />
Update
Small jQuery plugin
(function ($) {
$.fn.maxlength = function (length) {
return this.on('keydown', function () {
var maxlength = length || parseInt($(this).attr('maxlength'), 10) ;
if (maxlength && $(this).val().length >= maxlength) {
$(this).val($(this).val().slice(0, maxlength - 1));
}
});
};
}($));
Example
try using max...
<input type="number" max="99999" />
EDIT: Showing Validation
<form id='FormValidation'>
<input id="myNum" type="number" min="1" max="99999" />
<input type="text" maxlength="5" />
<input type="submit" />
</form>
Try adding a number greater than 99999 and hitting submit, check the updated fiddle.
This jquery could help too...
$('#myNum').keyup( function(e){
var max = $('#myNum').attr('max').length;
if ($(this).val().length >= max) {
$(this).val($(this).val().substr(0, max));
}
});
replace maxlength with max
// Max Length = 5
<input type="number" max="99999" />
// length between 1 to 5
<input type="number" min="1" max="99999" />
Updated Answer. It's so simple!
<input type="number" id="nbr"/>
<input type="text" maxlength="5" />
$(document).on('keypress','#nbr', function(e){
if($(this).val().length >= 5)
{
e.preventDefault();
}
});
And you can add a max attribute that will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />
changeI have two numeric inputs and would like to limit the max or min of the second one based on the changes of the first one. So....
<input id="input1" type="number" min="0" max="10" value="5" change="OnChangeNumeric()" >
<input id="input2" type="number" min="0" max="10" value="1" >
<script>
function OnChangeNumeric() {
//how to actually change the values is where i am stuck
$('#input2').max = 5;
}
</script>
how to actually change the values is where i am stuck
Thanks for your suggestions
$(function() {
$('#input1').on('change',function() {
var thisVal = this.value;
/*calculate newMin, and newMax for #input2 according to your rules
based on thisVal ........
$('#input2').attr('min', newMin).attr('max', newMax);*/
console.log( $('#input2')[0] );
});
});
No need for inline JS:
<input id="input1" type="number" min="0" max="10" value="5"/>
<input id="input2" type="number" min="0" max="10" value="1"/>
JS FIDDLE DEMO