0

I found a keyup error while creating a function that automatically add the thousand separator when typing in input. Everything works fine on desktop browser but error occurs when using it on mobile responsive. Below is the js code that I used:

$('input.number').keyup(function(event) {
  if(event.which >= 37 && event.which <= 40) return;
  $(this).val(function(index, value) {
    return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="number">
</input>

Example : I type 1000000 on computer browser and it shows exactly 1,000,000 but shows 100,010,000 on mobile responsive.

I found another code like this on Fiddle but same error. The phone I used to test is also Android OS version 7, The version of Chrome is 93.0.4577.62

So how to fix this error? Does anyone have any suggestions for me? Any suggestions are appreciated!

Thanks so much!

nhadatsonnghia
  • 109
  • 8
  • I'm unable reproduce this in Edge 93.0.961.44. Make sure it doesn't fire twice (add `console.log(event);` at the beginning of the function). Also, this unnecessary excessive use of jquery is making me cringe...why... it's not easier to read or making code any faster...this does same thing: `this.value = this.value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");` – vanowm Sep 11 '21 at 14:04
  • Hi @vanowm everything works fine on computer browser. I found error when using on mobile browser. Sorry buddy if the code make you cringe :( – nhadatsonnghia Sep 11 '21 at 14:22
  • but which browser? I'm testing it on an android phone in chrome, firefox, edge and samsung browser and it works just fine – vanowm Sep 11 '21 at 14:31
  • I used Google Chrome browser mobile version. you can easily checks errors on this [link](https://www.nhadatsonnghia.com/p/tinh-lai-suat-ngan-hang.html). – nhadatsonnghia Sep 11 '21 at 14:37
  • nope, in all 4 browsers on Android 11 (Chrome 93.4.4577.62, Firefox 91.4.0, Edge 46.06.4.5161, Samsung Internet 15.0.2.47) it works just fine. (you probably want to add mobile os tag to your question) – vanowm Sep 11 '21 at 14:47
  • It's so strange, the phone I used to test is also Android OS, version 7. It will be easy if the error occurs on the computer browser. Anyway, thank you for taking the time to help me, have a nice day bro. – nhadatsonnghia Sep 11 '21 at 15:06
  • So what version of chrome you are testing in? – vanowm Sep 11 '21 at 15:09
  • The version of Chrome that I tested on mobile is 93.0.4577.62 – nhadatsonnghia Sep 11 '21 at 15:11
  • This is a **[link](https://www.nhadatsonnghia.com/p/tinh-lai-suat-ngan-hang.html?m=1)** that has removed all the unnecessary content, only keeping the input part. You can check easily. – nhadatsonnghia Sep 11 '21 at 15:17
  • Hey buddy @vanowm I have found the problem is caused by the screen resolution 18.5:9 on Samsung S8plus. Thanks for trying to help me. – nhadatsonnghia Sep 12 '21 at 02:18

1 Answers1

1

I have tested in all browsers and everything works fine. The main problem probably lies in the uncommon aspect ratio of the S8 Plus. How to fix: add input event that triggers whenever the input changes. Input works both on desktop as well as mobile phones.

$('input.money').on('keyup input',function(event) {
  //code
});

I hope it can help those who have the same problem. More detail at jQuery Input Event.

nghiapham81
  • 26
  • 2
  • I doubt aspect ratio has anything to do with the issue...you should remove `keyup` event listener, it's redundant. – vanowm Sep 12 '21 at 04:19