检测移动和桌面设备上的字符代码
我想在用户类型时使用jquery在压缩空格后添加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(";") ]; $(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; }
只需听取多个活动
$(document).on("textInput keydown", "#text", function(event) { // ... }