我的 contenteditable div 有問題。當我單擊按鈕時，一個跨度就會插入到我的 div 中。當我現在開始輸入時，文本會進入范圍內，而不是超出范圍：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>這真是一件奇怪的事情。此外，當我添加表情符號、刪除內容并輸入內容時，<font>會使用表情符號的樣式創建一個元素。有誰知道我該如何解決這個問題？
2 回答
達令說
TA貢獻1821條經驗 獲得超6個贊
只需添加contenteditable="false"您的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 回答
- 0 關注
- 337 瀏覽
添加回答
舉報
0/150
提交
取消