My user is required to input 5 digit number for a pass code. Once the number is entered in to the input number field the number should not be shown. It should be changed to a black color bullet. How do I achieve that?
Here is my html:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input{
text-align:center;
}
<div class="creditCardNumber">
<input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
<input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
<input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
<input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
<input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
</div>
Looking the result like this:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input{
text-align:center;
width: 10%;
//Set the width of the inputs so changing the input type won't affect it.
}
//Go get those inputs -> returns an HTMLCollection
const inputs = document.getElementsByTagName("input");
//Let's turn that HTMLCollection into an array won't we?
const inputArray = Array.from(inputs);
//Ok now let's set up an array to store the user's password. This array has a length of "inputArray.length", so if you add more inputs, the array will grow accordingly.
let passwordArray = new Array(inputArray.length);
//Let's loop through the input. Oh yeah, let's pass the index also!
inputArray.forEach((input, index) => {
//Ok now on "blur" event, we want to save the value of the input if existant.
input.addEventListener("blur", () => {
if(input.value.length !== 0) {
//Get that value into that passwordArray.
passwordArray.splice(index, 1, input.value);
//Now for the trickery, let's change that input type back to password. So we can have that bullet.
input.type = "password";
}
});
//Alternatively, if the user wants to go back and change an input, let's change it back to input type number.
input.addEventListener("focus", () => {
input.addEventListener("focusin", () => {
input.type = "number";
input.value = "";
});
});
});
///////////////////////////////////////////////////////////////////////////////
///// Here's the non ES6 version if you're more comfortable with that ////////
/////////////////////////////////////////////////////////////////////////////
//Go get those inputs -> returns an HTMLCollection
var inputs = document.getElementsByTagName("input");
//Let's turn that HTMLCollection into an array won't we?
var inputArray = Array.from(inputs);
//Ok now let's set up an array to store the user's password. This array has a length of "inputArray.length", so if you add more inputs, the array will grow accordingly.
var passwordArray = new Array(inputArray.length);
//Let's loop through the input. Oh yeah, let's pass the index also!
inputArray.forEach(function (input, index) {
//Ok now on "blur" event, we want to save the value of the input if existant.
input.addEventListener("blur", function() {
if(input.value.length !== 0) {
//Get that value into that passwordArray.
passwordArray.splice(index, 1, input.value);
//Now for the trickery, let's change that input type back to password. So we can have that bullet.
input.type = "password";
}
});
//Alternatively, if the user wants to go back and change an input, let's change it back to input type number.
input.addEventListener("focusin", () => {
input.type = "number";
input.value = "";
});
});
https://fiddle.jshell.net/4xghnybf/7/
I use this approach this is much better:
<input type="number" pattern="[0-9]*" inputmode="numeric" min="0" max="9" style="-webkit-text-security: disc;" autofocus />
Related
i want to set a max value to a number input. I used the "max" HTML attribute but the user can write a number over the max value anyway. Is there any way to reset the value of that input to the maximum value I set it, after the user sets it beyond the maximum value? Maybe when the user clicks outside that input?
Here is my code
<input type="number" name="days" id="days" min="1" max="365" value="<?php echo $ipq[0]['valueParam']?>">
You might want to consider using a range control along with the value of the range being shown in a span element next to it. This way only the value range you specify is allowed (which is really what the range control is for).
const output = document.getElementById("output");
document.getElementById("days").addEventListener("input", function(){
output.textContent = this.value;
});
<input type="range" name="days" id="days" min="1" max="365" value="1"><span id="output">1</span>
The max attribute is validated on form submit. AS you can see in the snippet below the user will get a message when he tries to submit the form.
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>
If you want to prevent the user for inputting a value over 365 you can use js to do that. The snippet below shows how to prevent values over 365 for all number inputs.
document.querySelectorAll('input[type="number"]').forEach((el) => el.addEventListener('input', (e) => {
let inputEl = e.currentTarget;
if(parseFloat(inputEl.value) > parseFloat(inputEl.max)) {
inputEl.value = inputEl.max;
}
}));
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>
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>
Using a solution from a relevant question, how can I use the following script to only work on a specific input by limiting the input range between 0 and 0.20? For example, I have two number inputs with the ID's "A" and "B", and I only want the following script to work on input id="A".
$('input').on('input', function () {
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value < 0)
this.value = 0;
else if (value > 0.20)
this.value = 0.20;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="0" />
<input type="number" id="b" value="0" />
Use the ID of the specific element.
$('#a').on('input', function () {
Demo:
$('#a').on('input', function() {
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value < 0)
this.value = 0;
else if (value > 0.20)
this.value = 0.20;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="0" />
<input type="number" id="b" value="0" />
Alternatively, if you only need to support HTML5-compatible browsers you could ditch the JavaScript and simply use min and max attributes on the element itself. You can also use step to control how much the button increases the value by, which makes sense in a scenario where the input range is so small:
<input type="number" id="a" value="0" min="0" max="0.2" step="0.1" />
<input type="number" id="b" value="0" />
Change the selector from selecting all inputs to just the one you want e.g. $('#a').on('input', ...
I have 4 input boxes and there is common key down function:
$(".pincode-input-text").keydown(function(e) {
if($(this).val()=="") {
$(this).attr('type','number');
} else if($(this).val()!="") {
$(this).attr('type','password');
}
// check if input is numeric
var enteredValue = e.key;
if ($.isNumeric(enteredValue)) {
$(this).val(enteredValue);
$(this).next().attr('type', 'number');
$(this).next().focus();
$(this).next().val('');
$('.fn-mtd_pin_validate').nextAll('span:first').html(" ");
} else if(!$.isNumeric(enteredValue)) {
// check if input is non numeric
$(this).val('');
if(e.keyCode == 8 || e.key == "Backspace") {
$(this).prev().focus();
var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
elemt.validate();
return false;
}
$(this).focus();
$('.fn-mtd_pin_validate').nextAll('span:first').html("Invalid Characters");
$('.fn-mtd_pin_validate').nextAll('span:first').show();
}
// Update the value of input type password after value change on any input type.
var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
elemt.validate();
});
<span class="fn-mtd_pin_validate">
<input type="password" min="0" step="1" maxlength="1" autocomplete="off" class="form-control pincode-input-text first mtd_pin_first" tabindex="30">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text second mtd_pin_second" tabindex="31">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text third mtd_pin_third" tabindex="32">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text fourth mtd_pin_fourth" tabindex="33">
</span>
I am unable to understand, why there is value appeared on second box as soon as value entered on first one. However I am using $(this).next().val('');
The problem here is your logic on focus needs to occur on the keyup event, not the keydown event. When the keydown event occurs you move the focus before it has finished so the keypress event is finishing after you move it. So the only way around it is to do the focus logic after the key event is done.
$(".pincode-input-text").on("keydown", function(e) {
//backspace logic
}).on("keyup", function(e) {
//number logic
})
I have a number and range input that are working in unison using same value using Angular.js value. When the value is set to 0 (which is what it is by default when page loads $scope.lbs_needed = 0;, I want to show a placeholder="0" whenever the value of the number or range input is set to 0 that way the 0 value isn't in front of the user's input without them having to manually delete default 0.
Here's my html:
<form>
<div class="form-group">
<label for="number">Pounds of nitrogen desired per acre:</label>
<input type="number" class="form-control number-input" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" min="0" max="500" value="{[{lbs_needed}]}" placeholder="0">
<input type="range" min="0" max="500" class="form-control" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" placeholder="0">
</div>
</form>
So, if I understand correctly you want the textbox to have a default value but also want it to be changeable instantly without users having to backspace over the default?
Try this:
var input = document.getElementById('change-default');
input.onfocus = function () {
if (input.value == 0) {
input.value = '';
}
}
input.onblur = function () {
if (input.value == '') {
input.value = '0';
}
}
<input type="number" placeholder="0" value="0" id="change-default">
What I'm doing is listening for an focus event, you could also use addEventListener instead of onfocus.
If the value of the input box is 0 you remove its value ready for the user to type theirs in.