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
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)
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;">
is it possible to still display the placeholder text IF the value is equal to the minimum value?
For this code
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>
Can this be done with just html5? Or would this manipulation really have to be done with javascript?
Thanks!
I believe some manipulation is needed here is a javascript solution
If the user clicks on the input box and the min value is current, then it adds the placeholder.
If the user key in the value, it triggers a click
function func(e) {
if(e.target.value==e.target.getAttribute("min")){
e.target.value="";
}
}
document.getElementById("spreadThisTotal").addEventListener('click', func);
document.getElementById("spreadThisTotal").addEventListener('keyup', function(e){e.target.click()})
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated" />
Try with below solution:
document.getElementById('spreadThisTotal').addEventListener('keyup', checkValue);
function checkValue(event){
if(event.target.value == 0){
document.getElementById('spreadThisTotal').value = null;
}
}
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>
Is there a way to link the values of a <input type="range"> and an <input type="number">?
I would like to make changes to either the slider or to the numerical input and have both fields be updated. For some reason I have only been able to get an undefined value from the range element as of yet.
Here is my current JavaScript and HTML for this part of the document:
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
It's not working because updateTextInput1(this.val) should be updateTextInput1(this.value):
function updateTextInput1(val) {
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
However, I'd suggest using unobtrusive JavaScript, though.
Just attach an input event to each element. In doing so, both elements will be in sync.
var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');
range.addEventListener('input', function (e) {
field.value = e.target.value;
});
field.addEventListener('input', function (e) {
range.value = e.target.value;
});
<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Or you could use a more compact approach and select the sibling element:
document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);
function updateValue (e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
To display everytime the range or input text is changing you can use oninput and onchange on the input range, and also onkeypress and onchange on the input type text :
function updateTextInput1(val) {
val = val > 100 ? 100 : val;
val = val < 0 ? 0 : val;
document.getElementById('range').value = val;
document.getElementById('num1').value = val;
}
<input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
The error is: this.val instead of this.value
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
You should bind event using js/jq. And to link both, you could target specific sibling element (or any other relevant transversal method):
$('.inputRange, .inputNumber').on('input', function(){
$(this).siblings('.inputRange, .inputNumber').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
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