0

I need to make a text field accept only numbers and decimal point, and default to two decimal places. I got this code from a search here. It works for accepting only numbers. I need to make it accept decimal point, and default to two decimal places.

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

Thanks

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
Cypray
  • 11
  • 1
  • 1
  • 1
    You could use an HTML5 `number` input... `` – Tyler Roper Dec 12 '17 at 17:43
  • Possible duplicate of [Restricting input to textbox: allowing only numbers and decimal point](https://stackoverflow.com/questions/2808184/restricting-input-to-textbox-allowing-only-numbers-and-decimal-point) – Heretic Monkey Dec 12 '17 at 17:50

3 Answers3

1

You could use a regular expression to limit what can be entered into the field.

As an example:

<input type="text" pattern="(?:[01]|2(?![4-9])){1}\d{1}:[0-5]{1}\d{1}">

You can visit a site like regexlib.com which can help you build and test the type of regex you are seeking.

There may be a better or more eloquent method, but this easy and works for me.

Steven Kanberg
  • 6,078
  • 2
  • 16
  • 35
0

Leave it to HTML5:

<input type="number" step="0.01">

Also, remember about server side validation (in PHP for example). Don't try to force some missing keypress, or don't override default browser behaviour. This is not user friendly.

What will you do if you press A, and nothing is displayed? Would you go to a shop for a new keyboard?

In that case try to give the user a clue, what type of data you expect. Give the user a tool (type="number") to show best possible keyboard layout on the phone.

But don't try to do it "better". In that case it means worse.

More on the subject:

Jacek Kowalewski
  • 2,761
  • 2
  • 23
  • 36
0

If you want to always show 2 decimal places, you can reformat the input on change to round and display to 2 decimals:

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
    return false;
  return true;
}

$("#twodecimals").change(function() {
  var format = parseFloat(Math.round($(this).val() * 100) / 100).toFixed(2);
  $(this).val(format);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="twodecimals" onkeypress="return isNumberKey(event)" />
emshore
  • 489
  • 6
  • 15