【发布时间】：2019-03-18 06:31:23
【问题描述】：
我正在尝试在 contenteditable div 中添加一个简单的表情符号。但是添加表情符号光标后我遇到了问题。我从 codepen.io 创建了这个 DEMO 。在此演示中，您可以看到有一个树示例表情符号。当您单击第一个表情符号时，表情符号将添加到 #text contenteditable div。到目前为止一切正常，但在添加表情符号后，它仍保留在光标表情符号后面。
添加表情符号后，我希望你在光标前面的表情符号。我怎样才能做到这一点 ？任何人都可以在这里帮助我吗？
$(document).ready(function() {
$("body").on("paste", "#text", function(e) {
e.preventDefault();
});
$("body").on("keydown", "#text", function(event) {
//$('.character').text($(this).text().length);
if ($(this).text().length === 200 && event.keyCode != 8) {
event.preventDefault();
}
});
// Click to show clicked smiley
$("body").on("click",".emoji-box", function(){
var emojiKey = $(this).attr("data-smiley");
var emojiURL = $(this).attr("data-url");
$("#text").append("<img src="+emojiURL+" class='app-moji'>");
$("#text").focus();
});
});html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
-webkit-texts-size-adjust: 100%;
-webkit-backface-visibility: hidden;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
padding-top:100px;
}
.input {
position:relative;
width:100%;
display:inline-block;
padding:5px 0px;
}
#text {
width:100%;
outline:none;
border:1px solid #d8dbdf;
padding:15px;
border-radius:3px;
-webkit-border-radius:3px;
font-weight:300;
font-size:14px;
color:#444;
line-height: 17px;
word-wrap: break-word;
text-align: left !important;
}
#text img {
width:25px;
height:25px;
vertical-align: middle;
}
.app-moji {
margin-left:5px;
margin-right:5px;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
color:#d8dbdf;
}
.button {
float:right;
width:100px;
padding:8px;
text-align:center;
background-color:#d8dbdf;
border-raduis:3px;
-webkit-border-radius:3px;
cursor:pointer;
transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-webkit-transition: background-color 1s linear;
}
.button:hover {
background-color:#000;
color:#fff;
}
div.coloranimation {
transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-webkit-transition: background-color 1s linear;
background-color:#000000;
}
.ornekgoster {
position:relative;
width:100%;
padding:10px;
}
.ornek {
position:relative;
width:100%;
font-weight:300;
font-size:13px;
color:#444;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.ap-emoji {
position: relative;
float: left;
width: 100%;
padding-right: 10px;
overflow:hidden;
margin-top:20px;
}
.emoji-box {
position:relative;
width:29px;
height:29px;
float:left;
padding:2px;
cursor:pointer;
}
.emoji-box img {
width:100%;
position:relative;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="input">
<div id="text" placeholder="Wite something..." contenteditable="true"></div>
<input type="hidden" id="hidden" value=""/>
</div>
<div class="ap-emoji" id="emoji1">
<div class="emoji-box" data-smiley=":P" data-url="https://cdn.shopify.com/s/files/1/1061/1924/products/Hungry_Emoji_Icon_c20f1808-f3e2-4051-8941-3d157764e8cb.png"><img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Hungry_Emoji_Icon_c20f1808-f3e2-4051-8941-3d157764e8cb.png"></div>
<div class="emoji-box" data-smiley=":D" data-url="http://www.bigmouthdesign.co.uk/wp-content/uploads/2017/08/Happy-Face.png"><img src="http://www.bigmouthdesign.co.uk/wp-content/uploads/2017/08/Happy-Face.png"></div>
<div class="emoji-box" data-smiley="<3" data-url="http://clipart.info/images/ccovers/1496184263Heart-Eyes-Emoji-png-transparent-2.png"><img src="http://clipart.info/images/ccovers/1496184263Heart-Eyes-Emoji-png-transparent-2.png"></div>
</div>
</div>【问题讨论】：
标签： javascript jquery html css