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上没有事件监听器。

任何帮助表示感谢，谢谢。

编辑

我正在使用流星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返回值，对此没有附加任何事件监听器

Answer 1

如果我更改流星代码以删除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>

多余的空间问题消失了。希望这对某人有帮助

Answer 2

在您的代码中可能会有一些script或CSS，这是造成此问题的原因，因此，请检查原因或在提要中提要该问题的再现。

注意：在chrome和firefox上检查了您的代码，并且工作正常。您也可以检查此fiddle。

可编辑的，在按键末尾添加多个空格

2 个答案: