contenteditable 在按键末尾添加多个空格

Question

我有 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>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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 助手只是来自数据库的 returns 值，没有事件监听器附加到这个

Answer 1

可能您的代码中有一些 script 或 CSS 是导致此问题的原因，因此请检查原因或 post 一个 fiddle 问题所在会重现。

注意： 在 chrome 和 firefox 上检查了您的代码，它工作正常。你也可以检查这个 fiddle.

Answer 2

如果我更改我的流星代码以删除 html 中的 spaces，如下面的单行

<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>

那个额外的 space 问题已经消失了。希望这对某人有帮助

contenteditable 在按键末尾添加多个空格

contenteditable adding multiple spaces at the end on key press

javascript

css

jquery

contenteditable

meteor