Detecting character code on mobile & desktop devices

Question

I am trying to add Diez tag # after the pressed space using jquery when user type. I have created this DEMO from codepen.io.

In this demo when you write for example (how are you) the javascript code will change it like this (#how #are #you).

If you check DEMO you can see I have used textInput. It isn't work in Firefox but working on mobile devices. So if I use keypress the codes are working on FireFox but not working on mobile. My code should be work with all devices.

What is the solution to work my code in all devices ?

Here is the full code:

$(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"), "#$1"]
         ]);
         // 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

Simply listen for multiple events

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