DevStud DevStud - 1 year ago 49
Javascript Question

Detecting character code on mobile & desktop devices

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/[email protected]/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 Source

Simply listen for multiple events

$(document).on("textInput keydown", "#text", function(event) {
   // ...
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download