Блог

Главная - Вопросы по программированию - Добавленный диапазон исчезает, что мне делать?(HTML jquery)

Добавленный диапазон исчезает, что мне делать?(HTML jquery)

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я хочу ввести emoji в свой div как spantag.
Но затем тег span исчезает.

Я думаю, что мы удаляем добавленный тег span в конце события. Есть ли хороший способ?

И если строка в курсоре имеет значение span, когда в режиме разрыва все еще есть span. Он зарегистрирован как подпространство уже существующего диапазона. Есть ли хороший способ сделать это?

 $('#create_AAcontentsDIV').bind('keydown paste input', function() {
  const splitter = new GraphemeSplitter();
  var text;

  switch (event.type) {
    // case "keydown":
    //   event.preventDefault();
    // break;
    case "paste":
      if (!checkEmojis(event.clipboardData.getData("text"))) {
        event.preventDefault();
        return;
      }
      text = event.clipboardData.getData("text");
      var span = document.createElement("span");
      span.id = "emojispan";
      span.innerHTML = text;
      insertNodeAtCursor(span);
      break;
    case "input":
      if (!checkEmojis(event.data)) {
        event.preventDefault();
        return;
      }
      if (nullCheck(event.data)) return;
      text = event.data;
      var span = document.createElement("span");
      span.id = "emojispan";
      span.innerHTML = text;
      insertNodeAtCursor(span);
      break;
    default:
  }

});



function insertNodeAtCursor(node) {
  var range, html;
  if (window.getSelection amp;amp; window.getSelection().getRangeAt) {
    range = window.getSelection().getRangeAt(0);
    range.insertNode(node);
  } else if (document.selection amp;amp; document.selection.createRange) {
    range = document.selection.createRange();
    html = (node.nodeType == 3) ? node.data : node.outerHTML;
    range.pasteHTML(html);
  }
}



function checkEmojis(str) {
  const regex = /(?:[u2700-u27bf]|(?:ud83c[udde6-uddff]){2}|[ud800-udbff][udc00-udfff]|[u0023-u0039]ufe0f?u20e3|u3299|u3297|u303d|u3030|u24c2|ud83c[udd70-udd71]|ud83c[udd7e-udd7f]|ud83cudd8e|ud83c[udd91-udd9a]|ud83c[udde6-uddff]|ud83c[ude01-ude02]|ud83cude1a|ud83cude2f|ud83c[ude32-ude3a]|ud83c[ude50-ude51]|u203c|u2049|[u25aa-u25ab]|u25b6|u25c0|[u25fb-u25fe]|u00a9|u00ae|u2122|u2139|ud83cudc04|[u2600-u26FF]|u2b05|u2b06|u2b07|u2b1b|u2b1c|u2b50|u2b55|u231a|u231b|u2328|u23cf|[u23e9-u23f3]|[u23f8-u23fa]|ud83cudccf|u2934|u2935|[u2190-u21ff])/g;
  var regg = new RegExp(regex);
  return regg.test(str);
} 
 #create_AAcontentsDIV {
  height: 300px;
  border: 1px solid black;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/grapheme-splitter@1.0.4/index.min.js"></script>


<div id="create_AAcontentsDIV" class="aaEditor-textarea" contenteditable="true"></div>

Комментарии:

1. Я закрыл ваш div и сделал его более заметным. Также .bind не рекомендуется для .on

2. Я добавил GraphemeSplitter, но где checkEmoji?

3. CheckEmoji() — это просто функция проверки, является ли это эмодзи. Я добавил его в текст на всякий случай.

4. .привязка старая? Я посмотрю, совпадает ли .on .

5. Как воссоздать проблему заново? Похоже, это работает

Метки: ,