Question

我正在制作一个项目，用户可以点击表情符号，然后将它们插入到可信的div中。

我想要三个div，无论我是什么div，笑脸都应插入那个div中。
此外，问题在于表情符号仅插入div的末尾。我希望笑脸只能输入光标所在的位置。

注意：请检查所有div中笑脸的大小是否应保持相同。

<div id="text_wrapper">
    <div id="text" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
   <div id="text1" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
   <div id="text2" contentEditable="true" hidefocus="true"></div>
</div>
<span id="button">Add Emoji</span>

$("#button").click(function() {
  $("#text").append('<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>');
});

Demo

Answer 1

首先：插入三个要素中的右边一个：

您使用的是#text这个引用第一个可编辑div的表达式。

如果你想定位最后一个焦点的那个，你可以使用它。

为他们添加一个类，因此您可以轻松定位其中任何一个

<div id="text_wrapper">

    <div id="text" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<div id="text_wrapper">

   <div id="text1" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<div id="text_wrapper">

   <div id="text2" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<span id="button">Add Emoji</span>

然后，您可以使用单个事件侦听器轻松确定焦点的位置

$( document ).on( "click focusin" , ".editable" , function(){

    $( ".editable" ).removeClass( "focus" );
    $( this ).addClass( "focus" );

} );

从这一点开始，焦点项（带光标的项）将具有“.focus”类。

现在，您可以使用

$( document ).on( "click" , "#button" , function() {

  $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );

});

第二：插入光标位置

这似乎有点复杂，但有很简洁的方法。看看this topic。

在光标位置插入笑脸

1 个答案: