按键事件未在移动设备上运行 | 按键事件未在移动设备上运行

本文介绍了按键事件未在移动设备上运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到的问题是，当用户在移动设备浏览器上键入内容时，事件处理程序没有运行.

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

我的javascript代码的工作方式如下::当用户编写内容并按空格键时，javascript代码会自动为标签系统添加#(diez)标记.就像您编写:this is test message一样，javascript代码将其更改为:#this #is #test #message都在空格之后.

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.

如果您在计算机浏览器中选中 DEMO (Chrome, Safari, Firefox, Opera )，它工作正常.

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

但是，如果您在移动浏览器事件处理程序上选中此 DEMO ，当您键入某物时，它不会运行.

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.

推荐答案

我用此代码替换了代码的$(document).on("keypress", "#textInpu", function(){.....})部分，该错误消失了:

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();
      }
   });
});

如果您想知道，这就是您的问题: Android上的keyCode始终为229

用我提供的代码替换代码后，如果有任何错误，请告诉我.

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.