我正在制作一个元素,用户可以单击表情符号并将它们插入到 contenteditable 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"/>');
});
最佳答案
第一:插入到三个元素的右侧:
您正在使用表达式#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 .
关于javascript - 在光标位置插入笑脸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31513449/