在contenteditable DIV中的HTML之后用空格键插入空格

Question

上下文：我有一个contenteditable div用户可以输入或插入表情符号。我注意到表情符号（只是img元素）适当地呈现给用户，但是在实际的回复/评论中，只有当我手动击中空格键或立即插入另一个字符时，它们才会正确显示添加img后。

问题：使用jQuery时，当我检测到用户添加了img时，我无法模仿空格键的功能。

我尝试过几种不同的方法，搜索SO和谷歌，但没有运气。

HTML：

<div class="text">
    <div class="emojionearea emojiable-text-input emojionearea-inline">
        <div class="emojionearea-editor" contenteditable="true" 
        placeholder="Type answer here" tabindex="0" dir="ltr" 
        spellcheck="false" autocomplete="off" autocapitalize="off">     
            TEXT AND IMAGES GO HERE
        </div>
    </div>
</div>

这里有一些示例代码，我试图模仿空格键的实际PRESS，目的是将空格插入div html：

var text_input_for_emojis = $('div.text > div > div.emojionearea-editor')

在检测到添加的img标记后，这些会被触发。我的功能部分工作正常，所以我只是要求你们专注于模仿空格键的实际功能。

text_input_for_emojis.focus().trigger(jQuery.Event('keydown', { keycode: 32 }));

没有运气。试过这个：

text_input_for_emojis.focus().trigger(jQuery.Event('keypress', { keycode: 32 }));

再次，没有运气。试过这个，它没有处理空格键，也没有解决问题：

text_input_for_emojis.after(' ')

似乎无法向' ' html div text_input_for_emojis添加defaultEntryPoints = ["http", "https"] debug = true logLevel = "DEBUG" [web] address = ":8080" [web.auth.basic] users = ["admin:$apr1$CXbUFy59$gnQY50uMvzc3Q5tnhA2ZZ."] [entryPoints] [entryPoints.http] address = ":80" [entryPoints.http.redirect] entryPoint = "https" [entryPoints.https] address = ":443" [entryPoints.https.tls] [retry] [docker] endpoint = "unix:///var/run/docker.sock" domain = "viatecnologia.it" watch = true exposedbydefault = false [acme] email = "admin@viatecnologia.it" storage = "acme.json" entryPoint = "https" onHostRule = true [acme.dnsChallenge] provider = "ovh" delayBeforeCheck = 0 onDemand = false [[acme.domains]] main = "viatecnologia.it" sans = ["www.viatecnologia.it"] sub = "monitor.viatecnologia.it" 。

对这里可能发生什么的任何想法？

请注意我的演示：第一次表情符号时，表情符号没有正确地复制而没有我打空间吧。第二次，它在击中空格键之后起作用了。

Answer 1

将此$(text_input_for_emojis)更改为text_input_for_emojis。

var text_input_for_emojis = $('div.text > div > div.emojionearea-editor')

text_input_for_emojis.focus().trigger(jQuery.Event('keydown', { keycode: 32 }));