0

I made a script which converts keypress character typed by user to another desired character and put in input field. It works very well on desktop computer, but it is totally useless for touchscreen devices.

$("#test").on("keydown", function(e) {
  var keyPressed = e.key;
  var userInput = $(this).val();
  var regex = /[abc]+/g;
  var keysAllowed = ["Backspace", " ", "Enter", "Delete"];
  if (regex.test(keyPressed) == true || keysAllowed.indexOf(keyPressed) !== -1) {
    if (keyPressed == "a") {
      e.preventDefault();
      var keyPressedConverted = "b";
      userInput += keyPressedConverted;
      $("#test").val(userInput);
    } else if (keyPressed == "b") {
      e.preventDefault();
      var keyPressedConverted = "c";
      userInput += keyPressedConverted;
      $("#test").val(userInput);
    } else if (keyPressed == "c") {
      e.preventDefault();
      var keyPressedConverted = "d";
      userInput += keyPressedConverted;
      $("#test").val(userInput);
    }
  } else {
    e.preventDefault();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test" type="text">

I tried to put .on("keydown input"), .on("keydown touchend"), .on("input touchend") and still the script does not work.

For now I am trying to make this script to work on Android browser, but I would like to work on every touchscreen device.

Is there any universal solution?

UPDATE

I tried my script on Firefox for Android Mobile and it works perfectly, but still it does not work on Chrome for Android Mobile.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Boris J.
  • 67
  • 7
  • Off topic, but your code could use a `switch` statement and you can move `e.preventDefault()` to the top and remove the duplicates. – Lee Taylor Sep 28 '19 at 22:03
  • This problem was solved here https://stackoverflow.com/questions/47478453/keyup-keydown-and-keypress-events-not-working-on-mobile – Rafael Lopes Sep 28 '19 at 22:13
  • I am new in programming, and I didn't use ```switch``` before even if I know the principle. I went with ```if, else if``` approach because I was more familiar with it. Surely, I will listen your advice to avoid repetition. Thank you. – Boris J. Sep 28 '19 at 22:14
  • @Rafael Lopes This solution does not work. – Boris J. Sep 28 '19 at 22:20
  • @user3120612 Please define "does not work" – Lee Taylor Sep 28 '19 at 22:26
  • @Lee Taylor When I type on desktop keyboard, it types only letters I defined inside scriot. When I use mobile device, I can type whatever I want inside input field like there is no script at all. – Boris J. Sep 29 '19 at 05:38
  • Just use [event.which](https://api.jquery.com/event.which/) instead and it will work in any browser. – skobaljic Sep 29 '19 at 09:35
  • I tried but it does not work. Also, I read about ```event.which``` on MDN Documentation Website and it is said that this function is depreciated and will be unsupported in the future, and that ```event.key``` should be used instead. – Boris J. Sep 29 '19 at 11:14

0 Answers0