jQuery - Can not edit/delete input value in Firefox

Question

Restricting user to enter values upto two decimal i.e. 10.56 only.

<input class="number" type="text" value="" />
<input type="text" value="44" />

$('.number').on('keypress',function (event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
    var input = $(this).val();
    if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
        event.preventDefault();
    }
});

The fiddle works. But if a user press delte/tab/backspace, nothing happens.

How to allow user to edit/delete input value or move to next input box using tab button ?

Answer Reference : Link

That's because you blocked him to use any key after 2 decimals. Can you add exceptions to your rule? — Akshay Khandelwal, May 12 '15 at 12:11
If the fiddle works but it doesn't on your site, you most likely are missing the DOMReady handler; `$(function() { /* your code here */ });` — Rory McCrossan, May 12 '15 at 12:12
@RoryMcCrossan, even in the fiddle, user can not edit value or use tab button — Slimshadddyyy, May 12 '15 at 12:13

R3tep · Accepted Answer · 2015-05-13T10:15:54.763

2

You can escape the related keyboards keys. See the Javascript Char Codes, to know the key escaped.

See live demo :

$('.number').on('keypress',function (event) {

  // Add this condition to escape arrow/tab/delete/... and many others keys
  if(event.which <= 46) {
    return true;
  }

  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
  var input = $(this).val();
  if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
    event.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="number" type="text" value="" />

<input type="text" value="44" />

Update :

Add in your fiddle an if confition :

var acceptedKeys = [9, 37, 39, 46, 8];
if(acceptedKeys.indexOf(charCode) > -1) {
    return true;
}

With this code you accept this keys :

backspace
delete
left arrow
right arrow
tab

http://jsfiddle.net/e0orb0qq/29/

edited May 13 '15 at 10:15

answered May 12 '15 at 12:44

R3tep

12,512
10
48
75

R3tep: How can we make it work with this fiddle - http://jsfiddle.net/e0orb0qq/22/ using only JS ? – Slimshadddyyy May 13 '15 at 06:54
R3tep: Thanks for the fiddle, but now it allows to enter more than two decimal values which should not – Slimshadddyyy May 13 '15 at 08:40
@Slimshadddyyy http://jsfiddle.net/e0orb0qq/25/ This is my last fiddle. I am not here to develop for you! – R3tep May 13 '15 at 08:45
Agree that you are not here to develop for me, but in the fiddle if you delete a value say `10.55`, using delete button, and try to change it to say `8.55`, it does not allow i.e. value before decimal can not be changed – Slimshadddyyy May 13 '15 at 09:11

jQuery - Can not edit/delete input value in Firefox

1 Answers1

Linked