检测移动和桌面设备上的字符代码

Question

我正在尝试在用户键入时使用 jquery 在按下 space 之后添加 Diez 标记 #。我从 codepen.io.

创建了这个 DEMO

在此演示中，当您编写示例 (how are you) 时，javascript 代码将像这样更改它 (#how #are #you)。

如果你检查DEMO你可以看到我已经使用了textInput。它在 Firefox 中不工作，但 在移动设备上工作。因此，如果我使用 keypress，代码可以在 FireFox 上运行，但 不能在移动设备上运行。我的代码应该适用于所有设备。

让我的代码在所有设备上运行的解决方案是什么？

完整代码如下：

$(document).ready(function() {
   // Move cursor to the end.
   function placeCaretAtEndX(el) {
      el.focus();
      if (
         typeof window.getSelection != "undefined" &&
         typeof document.createRange != "undefined"
      ) {
         var range = document.createRange();
         range.selectNodeContents(el);
         range.collapse(false);
         var sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
      } else if (typeof document.body.createTextRange != "undefined") {
         var textRange = document.body.createTextRange();
         textRange.moveToElementText(el);
         textRange.collapse(false);
         textRange.select();
      }
   }

   // Define special characters:
   var charactersX =  [
      0,
      32,188,186,222,221,219,13
      // add other punctuation symbols or keys
   ];

   // Convert characters to charCode
   function toCharCodeX(char) {
      return char.charCodeAt(0);
   }

   var forbiddenCharactersX =  [
      toCharCodeX("_"),
      toCharCodeX("-"),
      toCharCodeX("?"),
      toCharCodeX("*"),
      toCharCodeX("\"),
      toCharCodeX("/"),
      toCharCodeX("("),
      toCharCodeX(")"),
      toCharCodeX("="),
      toCharCodeX("&"),
      toCharCodeX("%"),
      toCharCodeX("+"),
      toCharCodeX("^"),
      toCharCodeX("#"),
      toCharCodeX("'"),
      toCharCodeX("<"),
      toCharCodeX("|"),
      toCharCodeX(">"),
      toCharCodeX("."),
      toCharCodeX(","),
      toCharCodeX(";")
   ];

   $(document).on("textInput", "#text", function(event) {
      var code = event.keyCode || event.which; 
      if (charactersX.indexOf(code)>-1) {
         // Get and modify text.
         var text = $("#text").text();
         text = XRegExp.replaceEach(text, [
            [/#\s*/g, ""],
            [/\s{2,}/g, " "],
            [XRegExp("(?:\s|^)([\p{L}\p{N}]+)(?=\s|$)(?=.*\s\1(?=\s|$))","gi"),""],
            [XRegExp("([\p{N}\p{L}]+)", "g"), "#"]
         ]);
         // Save content.
         $("#text").text(text);
         // Move cursor to the end
         placeCaretAtEndX(document.querySelector("#text"));
      } else if (forbiddenCharactersX.indexOf(code)>-1) {
         event.preventDefault();
      }
   });
});

.container {
   position:relative;
   width:100%;
   max-width:600px;
   overflow:hidden;
   padding:10px;
   margin:0px auto;
   margin-top:50px;
}
* {
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}
.addiez {
   position:relative;
   width:100%;
   padding:30px;
   border:1px solid #d8dbdf;
   outline:none;
   text-transform: lowercase;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.addiez::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: rgb(0, 0, 1);
}
.addiez[contentEditable=true]:empty:not(:focus):before  {
      content:attr(placeholder);
      color: #444;
    }

.note {
   position:relative;
   width:100%;
   padding:30px;
   font-weight:300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   line-height:1.8rem;
   font-size:13px;
}
.ad_text {
   position:relative;
   width:100%;
   padding:10px 30px;
   overflow:hidden;
   font-weight:300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   line-height:1.8rem;
   font-size:13px;
}

<script src="https://unpkg.com/xregexp@3.2.0/xregexp-all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div>
   <div class="ad_text" id="ad_text"></div>

Answer 1

简单地监听多个事件

$(document).on("textInput keydown", "#text", function(event) {
   // ...
}

检测移动和桌面设备上的字符代码

Detecting character code on mobile & desktop devices

javascript

jquery

keycode