0

I have a Javascript function that listens to a change event of a TextBox in a table. The rows have cells with td class="cost" type="number".

But this is allowing hyphens, I want to prevent -hyphens while allowing one . decimal. In my search, the answers on SO talk about keyUp/Down events, I am not sure if this was possible to get keycode in the change event & similar question here does not have an answer

My goal: I only want to allow the user to enter numbers, with a max of ONE .decimal only.

How to get/watch the keycode, from the textBox change event?. However, adding the type="number" allows hyphens - which I do Not want!

(Or is there an easier way to validate textbox numbers for things like cost?)

$('#table').on('change', '.cost', function () {

        var keyVal = $(this).event; //.val;
        var keyValKeyCode = $(this).event.keyCode;// undefined?

        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(keyVal.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
            // Allow: Ctrl+A
            (keyVal.keyCode == 65 && (keyVal.ctrlKey === true || keyVal.metaKey === true)) ||
            // Allow: Ctrl+C
            (keyVal.keyCode == 67 && (keyVal.ctrlKey === true || keyVal.metaKey === true)) ||
            // Allow: Ctrl+X
            (keyVal.keyCode == 88 && (keyVal.ctrlKey === true || keyVal.metaKey === true)) ||
            // Allow: home, end, left, right
            (keyVal.keyCode >= 35 && keyVal.keyCode <= 39) ||
            //Allow numbers and numbers + shift key
            ((keyVal.shiftKey && (keyVal.keyCode >= 48 && keyVal.keyCode <= 57)) || (keyVal.keyCode >= 96 && keyVal.keyCode <= 105))) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((!keyVal.shiftKey && (keyVal.keyCode < 48 || keyVal.keyCode > 57)) || (keyVal.keyCode < 96 || keyVal.keyCode > 105)) {
            // only allow ONE decimal
            if ($(this).value < 0 || $(this).value > 500) // allow upto 500$
                return;

            keyVal.preventDefault();
        }

)};
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Transformer
  • 6,963
  • 2
  • 26
  • 52
  • You can't use keycodes in the `change` event, because the `change` event isn't associated with the keyboard, it occurs when the user moves the focus out of the field. Why don't you just do a one-line regular expression-based validation of the field's full text? (And/or use a regex-based string `.replace()` to remove any non-digits?) – nnnnnn Apr 02 '17 at 03:48
  • @nnnnnn but the MDN reference [here](http://stackoverflow.com/a/25579454/6085193) suggests `event.keyCode` is available... unless I am reading this wrong? or can I trigger bind two events and check the keypress event before the change event? can you give me an idea on how to tackle this. I need the change event.. – Transformer Apr 02 '17 at 03:50
  • You're quoting *key* event references. As I already said, the `change` event is *not* a key event. The easiest way to test that the current field value is only digits with max one decimal point is with a regular expression. Although note that `type="number"` inputs *do* allow you to specify a `min` and/or `max` attribute so you could prevent negative numbers that way. – nnnnnn Apr 02 '17 at 03:53

0 Answers0