我有 contenteditable
div
,其中包含以下 HTML
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
</div>
当我想在其中输入额外的文本时,当我输入任何键时,它会在正在制作的 div 的末尾添加很多
。
这个 gif 显示了正在发生的事情:http://g.recordit.co/l8m6IQwmNb.gif
这是当我输入一个字母 n
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
n
</div>
如您所见,这里有很多
,我该如何解决这个问题?我在 safari 中试过,同样的问题,所以这与浏览器完全无关。
另外,这个 div 没有附加事件监听器。
感谢任何帮助,谢谢。
编辑
我正在使用 meteor js 框架,这是我用来生成此 html 的 html 代码
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
我的 items
助手只是从 db 返回值,没有附加到此的事件监听器
最佳答案
如果我更改我的 meteor 代码以删除 html 中的空格,如下面的单行
<div contenteditable="true" class="editor-note" id="{{segmentId}}">{{#each items}}{{showSpace @index}}<span id="{{_id}}">{{text}}</span>{{/each}}</div>
而不是多行传播
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
多余的空间问题消失了。希望这对某人有帮助
关于javascript - contenteditable 在按键末尾添加多个空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51100750/