【问题标题】:keypress event is not running on a mobile device按键事件未在移动设备上运行
【发布时间】:2017-07-23 23:35:43
【问题描述】:

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

我的 javascript 代码是这样工作的: 当用户写一些东西并按下空格时,javascript 代码会自动为 hashtag 系统添加 #(diez) 标签。就像你写:this is test message,javascript 代码改变它这样:#this #is #test #message 都在空格之后。

如果您在计算机浏览器 (Chrome, Safari, Firefox, Opera) 上检查此 DEMO,它工作正常。

但是,如果您在移动浏览器上选中此DEMO,则当您键入某些内容时,事件处理程序不会运行。

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

完整代码是HERE

【问题讨论】:

  • 您可能想告诉我们您想要实现的目标。如果要在用户按空格键时创建主题标签,则目前无法正常工作。当我按空格时,它会自动删除空格。
  • 如果你想要一个答案,至少提供一个问题,因为你提供的不是问题,它只是一段无法运行的代码,因为我们没有你拥有的功能,我们也没有你拥有的 HTML,你也没有解释你想要实现的目标。
  • @JoãoSoares 抱歉缺少。现在我以明确的方式解释。你可以检查我的问题。谢谢
  • @Taurus 抱歉缺少。现在我以明确的方式解释。你可以检查我的问题。谢谢
  • 这是特定于物理移动设备的吗?使用内置 Chrome 模拟器时是否存在错误?

标签: javascript android jquery mobile


【解决方案1】:

我用这个替换了你代码中的$(document).on("keypress", "#textInpu", function(){.....}) 部分,错误就消失了:

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

如果您想知道,这是您的问题:keyCode on android is always 229

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-23
    相关资源
    最近更新 更多