У меня тоже были трудности, просто wrapInner a span только один раз , когда я вводил в div с contenteditable вместо добавления span для каждого Я набираю символ.
Я добавил фрагмент кода ниже, чтобы вы могли проверить его. Я пытался выяснить это самостоятельно в течение одного дня, и я все еще не нашел, как заставить его появляться один раз, когда вы начинаете вводить его.
$("#send_message").on('input',function() {
$('#send_message span').each(function(item) {
if(item > 1) {
$("#send_message > span ").html();
} else {
$("#send_message").wrapInner('<span data-key="ch0506_f12" data-text="true"></span>');
}
});
});
$("#send_message").keypress(function(e) {
if(e.which == 13) {
if($(this).html('') == 0) {
$(this + " > div").remove();
alert('Please fill out something');
e.preventDefault();
} else {
$.ajax({
url: "chatHandler.php",
method: 'POST',
data: {
msg: $("#send_message").html(),
tuID: $("#id_touser").val()
},
success: function(response) {
$(".chat_message_content ul").append(response);
}
});
//$(this).text().blur();
}
}
});
.msg {
position: absolute;
width: 100%;
height: 50px;
border: 1px solid #000;
}
.msg:focus {
outline: 0;
}
.msg:empty::before {
content: attr(data-title);
cursor: text;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="msg" name="send_message" id="send_message" contenteditable="true" data-key="ch0506_f12" data-title="Type your message..."></div>
</body>
</html>