Space key input erases data with regex.replace

Question

I searched for a solution for more than three days. I found one stack answer Stack Ans and his JSFiddle JSFiddle which is 100% working for Desktop and 99% working for the mobile version. Sample Code:

<input type="text" class="numeric" />
$('.numeric').on('input', function (event) { 
   this.value = this.value.replace(/[^0-9]/g, '');
});

View the jsfiddle link in mobile and test it for yourself, Test case: provide input value as 12345, then press spacebar twice it removes 5, next twice space key removes 4. How to solve this?

The below code works in the Desktop browser and not in the mobile browser because the key code is not recognized.

$(".numeric").on("keypress", function (event) {
   if ((event.which < 48 || event.which > 57)) event.preventDefault();
});

Test Video Log: Video Log Bug Report

I tested this out in Android in Chrome browser and didn't get the issue when pressing the space bar. What mobile browser and phone are you using to test? — Doug F, Feb 25 '19 at 13:36
@DougF, my phone is Redmi 4, Chrome, first give number input as 123456789012, then keep on pressing space bar. You will notice the action is causing backspace event. I wish to show you the screen recording got any idea for sharing it with you? — Pranesh Janarthanan, Feb 25 '19 at 13:56
I tried this again on my phone and I'm not getting the problem you're getting. When I press space nothing happens. I can only input numbers into the text box. I did notice that the JQuery that is referenced is 1.9.x which is pretty old, so maybe you can create a new fiddle with updated JQuery scripts and see if that works. — Doug F, Feb 25 '19 at 14:02
@DougF, I tried this with updated jquery version 3.3.1 under w3schools URL(https://www.w3schools.com/code/tryit.asp?filename=G1J24SFCF8V4), but still the same issue persist. I wish to share my phone screen recording. — Pranesh Janarthanan, Feb 25 '19 at 14:19
@DougF, Here is my video log for your reference: https://vimeo.com/319472208, — Pranesh Janarthanan, Feb 25 '19 at 14:22
Is that keyboard that you're using on your phone the default keyboard? Do you have another browser on your phone to test it out with? Or even another mobile device? — Doug F, Feb 25 '19 at 14:27
Its a google keyboard, my team tester posted a bug for it by testing in Motorolla brand android phone. we cannot change the keyboard here, because it is commonly used among people when it is brought to live. — Pranesh Janarthanan, Feb 25 '19 at 14:46

score 0 · Accepted Answer · answered Apr 23 '19 at 15:07

I have found a solution to my problem,

$('.NumOnly').on('input', function (event) {
if (this.value.indexOf(' ') < 0) {
    this.value = this.value.trim().replace(/[^0-9]/g, '');
    if (!CheckLength(event.target.maxLength, $("#" + event.target.id).val())) {
        event.returnValue = false;
        return false;
    }
}
else this.value = this.value.trim();
});

I check the input value has space using indexOf(' '). If the result is >= 0 then trim() the value, else replace using regular expression based validation.

Space key input erases data with regex.replace

1 Answers1