I can specify the 'step' for thousand increments when a user inputs a number. But why I cannot write '1,000' instead of '1000' for the increment to happen with the comma separation for thousands? How to do this?
<div class="input"><label for="salary">Salary</label>
<input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" step="1000" min="0" required="" type="number"></div>
It cannot be done if you want to stick to the type="number", because:
As Chrome reports:
The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
As specification mentions:
value = floating-point number
Follow the above link to see that spec doesn't mention use of comma at all.
If you want to switch to type="text":
document.getElementById('salary').addEventListener('input', event =>
event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
);
<div class="input">
<label for="salary">Salary</label>
<input class='inp_cont' id="salary" pattern="^[\d,]+$" name="salary" placeholder="Enter your salary" required="" type="text">
</div>
Related
So there is an input field where I enter my digits. And in one of the field is specified for decimal digits(after coma). So for example if I enter 2, the amount of after coma digits should be 2 in all fields. I used math round + toFixed function to do that but for some reason it doesnt give me the desired output, even thought a program reads decimal value
Please help me understand why!
function convertToOthers(convertFrom, value, dec) {
if (parseFloat(dec.value)) {
switch (convertFrom) {
case "mm":
mmToOther(parseFloat(Math.round((value * 1000) / 10 / 100)).toFixed(parseFloat(dec.value)));
break;
}
}
}
<label for="mm">Milimeters - mm</label>
<div>
<input type="text" class="fname" id="mm" value="" name="inputNumber" oninput="convertToOthers('mm', this.value, dec)" /> <button class="buttonPic" onclick="copyFunction('mm')"></button><br><br>
</div>
<label for="dec">Decimal digits</label><br>
<div>
<input type="text" class="fname decimal" id="dec" value=""><br><br>
</div>
toFixed()
I have used toFixed() to fix the number to decimal places.
The toFixed() method formats a number using fixed-point notation.
Syntax
toFixed(digits)
Return value
A string representing the given number using fixed-point notation.
Demostration:
function mmToOther(x) {console.log("eval", x)}
function convertToOthers(convertFrom, value, dec){
if(parseFloat(dec.value)){
switch(convertFrom){
case "mm" : mmToOther(
Number.parseFloat(value).toFixed(parseFloat(dec.value))
);
break;
}
}
}
<label for="mm">Milimeters - mm</label>
<div>
<input
type="text"
class="fname"
id="mm"
value=""
name="inputNumber"
oninput="convertToOthers('mm', this.value, dec)"
>
<button class = "buttonPic" onclick = "copyFunction('mm')" >COPY</button>
<br>
<br>
</div>
<label for="dec">Decimal digits</label><br>
<div>
<input type="text" class="fname decimal" id="dec" value="" ><br><br>
</div>
Is it possible to add leading and ending symbols or text to input field which cannot be removed?
I am trying to have a $ at the beginning and % at the end of two fields. Similar to the input fields on this website: https://www.nerdwallet.com/mortgages/mortgage-calculator
<input type="text" maxlength="12" name="purchasePrice" data-name="purchasePrice" placeholder="$200,000" required="">
<input type="text" maxlength="3" name="rate" data-name="rate" placeholder="2%" required="">
This is my form:
<input type="text" class="form-control amount" value="" placeholder="amount" />
<input type="hidden" class="price" value="3.30" />
<input type="text" class="form-control total" value="" disabled />
My js:
$('.amount').on('keyup', function (e) {
e.preventDefault();
var amount = $('.amount').val();
var total = Number(amount) * Number($('.price').val());
$('.total').val(total);
});
If i fill in an amount of 3, the result in input with class total shows me: 9.899999999999999 instead of 19.80. (3 * 3.30 is exactly 9.90).
Can someone explain me why the result is so many chars behind the dot?
I know i can reduce the result in 2 decimals with .toFixed(2) but that doesn't explain for me why a value which is exactly 9.90 changes into 9.899999999999999
Fiddle
This is because the way float numbers are stored as binary digits. To enable a wide rage of numbers and still maintain a reasonable size in memory for each number, the precision of results is sacrificed a bit. You can read more about here https://stackoverflow.com/a/588014/3807365
This happens due to the how floating point arithmetic works. In a few words, the floating number is not represented internally as-is, so when the language goes back and forth to display it, there can be some precision issues (such as the one you are facing). See the link for more details.
In summary, as you seem to be handling currency calculations, your best option is to use, instead of float, a specific datatype such as currency.js:
$('.amount').on('keyup', function (e) {
e.preventDefault();
var amount = $('.amount').val();
var total = currency(amount).multiply(currency($('.price').val()));
$('.total').val(total);
});
<script src="https://cdn.jsdelivr.net/npm/currency.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control amount" value="" placeholder="amount" />
<input type="hidden" class="price" value="3.30" />
<input type="text" class="form-control total" value="" disabled />
There are many libs for that, another one is dinero.js.
I am trying to add space in <input type="number"> value in html.
But whenever i add space in value like this value="0401 889 889" than there is nothing appear in <input type="number">.
Without adding a blank space
If i am not add blank space in <input type="number">'s value than its works fine.
<input type="number" value="0401889889">
After adding a blank space in ``
<input type="number" value="0401 889 889">
What i exactly want
<h2>Without adding a space in value</h2>
<input type="number" value="0401889889">
<h2>With adding a space in value</h2>
<input type="number" value="0401 889 889">
Instead, you can use this
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Check this answer : https://stackoverflow.com/a/25121813/14050736
You'll have to modify the regex a bit according to the group of number you desire
Edit : I just noticed : Your input must be in "text" not "number"
If you want to prevent users from typing alphabetic characters you need to set an event listener for the "input" event that delete invalid characters from the value on-the-fly:
const phone = document.getElementById('phone');
phone.addEventListener('input', (event) => {
// delete any character that is not a digit or a space
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
});
// or, if you have more than one input of type "tel" (e.g. mobile and landline)
const phones = document.querySelectorAll('input[type=tel]');
phones.forEach(phone => phone.addEventListener('input', (event) => {
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
}))
<input type="tel" id="phone" name="phone" placeholder="0401 889 889" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">
<input type="tel" id="mobile" name="mobile" placeholder="0401 998 998" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">
I would like to know how (with simple working example) to add maxlength and minlength to input tag generated by
dijit/form/ValidationTextBox
Example of desired output:
<input maxlength="10" minlength="2" class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" name="title" type="text" tabindex="0" id="Image-1-title-LabelValidationTextBox" aria-required="undefined" value="Title text for image Image-1" aria-invalid="false">
try this example with regex constraint
<input type="text" value="someTestString" required="true"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp: '[a-zA-Z0-9$%!_]{2,10}', invalidMessage: 'The value must be at least 2 character and maximum 10'" />
ValidationTextBox has the properties minLength and maxLength. They are used in the following why in a declarative manner.
<input data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="required:true,
maxLength:5,
minLength:2"
type="text"
name="exmaple" />
Here's another solution:
registry.byId("validationTextBox").validator = function(value, constraints) {
if(value) {
return value.length >= 2 && value.length <= 10;
}
return true;
}