contenteditable добавление нескольких пробелов в конце при нажатии клавиши - PullRequest
Новая
       12

contenteditable добавление нескольких пробелов в конце при нажатии клавиши

0 голосов
/ 29 июня 2018

У меня есть 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>

Когда я хочу ввести в него дополнительный текст, при вводе любой клавиши добавляется лот &nbsp; в конце создаваемого 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>

Здесь, как вы можете видеть, здесь много &nbsp;, как я могу решить эту проблему? Я пробовал это в сафари, та же проблема, так что это вообще не связано с браузером.

Кроме того, к этому разделу не подключены прослушиватели событий.

Любая помощь приветствуется, спасибо.

EDIT

Я использую Meteor JS Framework, и это HTML-код, который я использую для создания этого HTML 

<div class="seg-editor">
  <div contenteditable="true" class="editor-note" id="{{segmentId}}">
    {{#each items}}
      <span id="{{_id}}">{{text}}</span>
    {{/each}}
  </div>
</div>

my items helper просто возвращает значения из базы данных, к этому

не подключены прослушиватели событий

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Если я изменю свой метеоритный код, чтобы убрать пробелы в 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>

проблема с дополнительным пространством исчезла. Надеюсь, это кому-нибудь поможет

0 голосов
/ 29 июня 2018

Возможно, в вашем коде будет несколько script или CSS, что является причиной этого, поэтому, пожалуйста, проверьте причину или опубликуйте скрипку, где эта проблема будет воспроизведена.

Примечание: Проверьте ваш код на Chrome и Firefox, и он работает нормально. Вы тоже можете проверить эту скрипку .

...