我正在尝试使用jquery创建一个create #hashtag系统。它的工作方式就像开始写一些单词并从键盘按空格然后jquery代码添加#
你输入的单词。一切正常,但我不会允许像
我使用此 DEMO
中的jquery禁止使用以下字符/*-+_?\}{()[]&%$#^'¡!<"é>
Google Chrome禁止使用角色,但firefox和safari并不禁止。我在这里失踪的任何人都可以帮助我吗?
$(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(";"),
toCharCodeX("@")
];
$(document).on("textInput keydown", "#text", function(event) {
var kc = (event.which) ? event.which : event.originalEvent.data.charCodeAt(0);
if (charactersX.indexOf(kc) > -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(kc) > -1) {
event.preventDefault();
}
});
});
&#13;
.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;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/xregexp@3.2.0/xregexp-all.js"></script>
<div class="container">
<div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div>
</div>
&#13;