Clash Royale CLAN TAG

Javascript restrict text field to numbers and decimals?

I've tried a few solutions here but all of them boil down to removing the non-numeric input after the input is put in.

This solution here works for numbers:
https://jsfiddle.net/HkEuf/17470/

But it doesn't allow decimals.

I've to edit it as follows but it still won't allow for decimals:

$(document).ready(function () {
//called when key is pressed in textbox

$("#quantity").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57 )) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" id="quantity" />

3 Answers
3

You could do this all with HTML, all you need to do is use the number type with a step attribute like this.

step

required

min

max

<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>

We can block the e key with a keydown event and if e.key == 'e' we can prevent the key:

e

keydown

e.key == 'e'

Array.from(document.querySelectorAll('[type=number]')).forEach(i => {
i.addEventListener('keydown', function(e) {
if(e.key == 'e') e.preventDefault()
})
})

<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>

e

Here I've added some code in your jsfiddle reference to allow decimal number and prevent user to enter "." symbol twice. Here's the complete code

$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
var tempInput = $("#quantity").val()
if(tempInput.split(".").length >= 2 && e.which == 46)
return false; //To check whether user has entered dot symbol before
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 46 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});


If anything goes wrong, feel free to ask.

P.S : I assume that you use "." symbol to represent float number

$(document).ready(function () {
//called when key is pressed in textbox

$("#quantity").keypress(function (e) {
// If it's not a digit then display error and don't type anything
if (e.which == 46 || e.which == 8 || e.which == 0 || (e.which > 48 && e.which < 57 )) {
// Validate count of decimal separators
var dSCount = ($(this).val().match(/./g) || ).length;
if (e.which == 46 && dSCount > 0) {
// Display error message
$("#errmsg").html("Only one decimal separator allowed").show().fadeOut("slow");
return false;
}
} else {
// Display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});


There is a chance that the input ends with a dot, you'll have to validate that too (you could simply remove the trailing decimal separator before the form submission).

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.