檢測移動設備和桌面設備上的字符代碼

Question

我想在用戶鍵入時使用jquery按下空格後添加Diez標籤＃。我從codepen.io創建了這個DEMO。

在本演示中，當您編寫例如（how are you）時，javascript代碼會將其更改爲（#how #are #you）。

如果你檢查DEMO你可以看到我使用textInput。這是不工作在火狐但在移動設備上工作。因此，如果我使用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"), "#$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

只需監聽多個事件

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