0

the problem I am having is that the event handler isn't running when the user types on mobile devices browsers.

My javascript code working like this: When user write someting and press space javascript code automatically adding #(diez) tag for hashtag system. Like if you write: this is test message, javascript code change it like this: #this #is #test #message all after space.

If you check this DEMO on your computer browser (Chrome, Safari, Firefox, Opera) it is working fine.

But if you check this DEMO on your mobile browsers event handler isn't running when you types someting. 

$("body").on("keypress","#text", function(e) {
     var code = e.charCode || e.keyCode || e.which;
    if (charactersX.has(code)) {
      var text = $("#text").text();
      text = addHashtags(text);
      $("#text").text(text);
      placeCaretAtEndX(document.querySelector("#text"));
      console.log(text);
    } else if (forbiddenCharactersX.has(code)) {
      e.preventDefault();
      console.log("something");
    }
  });

Full code is HERE.

AlwaysStudent
  • 1,354
  • 18
  • 49
  • You might want to tell us what you are trying to achieve. If it's to create hashtags as users press space, it's not working at the moment. When I press space it deletes the space automatically. – J. S. Jul 24 '17 at 01:03
  • At least provide a problem if you want an answer, because what you have provided is not a problem, it is just a piece of code that does not run because we don't have the functions you have, nor do we have the HTML you have, nor do you explain what you are trying to achieve. – doubleOrt Jul 24 '17 at 02:50
  • @JoãoSoares Sorry for the lack. Now I explain in an explicit way. You can check my question. Thanks – AlwaysStudent Jul 24 '17 at 05:01
  • @Taurus Sorry for the lack. Now I explain in an explicit way. You can check my question. Thanks – AlwaysStudent Jul 24 '17 at 05:01
  • Is this specific to physical mobile devices ? Is the bug there when you use the built-in Chrome emulators ? – doubleOrt Jul 24 '17 at 05:08
  • @Taurus I didn't see any bug. I have tyred many things (keyup, keypress, keydown etc.) but not give me a solution. Chrome emulators say working perfectly also other desktop browsers. Code is not working on physical mobile devices. – AlwaysStudent Jul 24 '17 at 05:14

1 Answers1

2

I replaced the $(document).on("keypress", "#textInpu", function(){.....}) part of your code with this and the bug is gone: 

   $(document).on("textInput", "#text", function(event) {
      var code = event.originalEvent.data.charCodeAt(0);
      if (charactersX.has(code)) {
         // Get and modify text.
         var text = $("#text").text();
         text = addHashtags(text);
         // Save content.
         $("#text").text(text);
         // Move cursor to the end
         placeCaretAtEndX(document.querySelector("#text"));
      } else if (forbiddenCharactersX.has(code)) {
         e.preventDefault();
      }
   });
});

This was your issue if you are wondering: keyCode on android is always 229

If there are any bugs after you replace your code with what i provided, please let me know.

doubleOrt
  • 2,407
  • 1
  • 14
  • 34