Mam problem z moim edytowalnym div. Kiedy klikam przycisk, do mojego elementu div zostaje wstawiony zakres. Kiedy zaczynam teraz pisać, tekst trafia do zakresu, a nie poza niego:

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">😅</span>`);
    input.trigger('input');
  });
});
[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

To naprawdę dziwna rzecz. A także, kiedy dodam emoji, usuwam zawartość i coś wpisuję, tworzony jest element <font> w stylu emoji. Czy ktoś wie, jak mogę to naprawić?

1
Mr. Jo 12 marzec 2020, 14:26

2 odpowiedzi

Najlepsza odpowiedź

Po prostu dodaj contenteditable="false" do swojego span.

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji" contenteditable="false">😅</span>`);
    input.trigger('input');
  });
});
[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>
2
Shree 12 marzec 2020, 11:34

Do wstawiania emotikonów należy używać tagu img, zdecydowanie radzę zapoznać się z telegramem internetowym lub innym internetowym czat, aby zobaczyć, co należy zrobić z obsługą emotikonów.

0
Mohammad Javidi 12 marzec 2020, 11:34