javascript - 在更改 contentEditable div 的 css 字体大小后直观地更新插入符大小

Question

我有一个 contentEditable div用户可以在其中输入。用户可以使用鼠标滚轮更改 font-size的 div .

我面临的问题:如果 div为空，用户更改了 font-size插入符大小不会改变:这种行为可能会导致对实际 font-size 的一些混淆正在使用。一旦用户开始输入，插入符就会调整到正确的大小。

这是更改 css font-size 的代码:

$("#textBox").css("font-size", fontSize);

用户打开应用程序(默认字体大小，插入符正确)

用户将字体大小更改为 100(插入符大小不根据字体大小更改):

用户开始输入(插入符最终更新):

我试图更改 div 的内容当字体为空时调整字体大小时，但它不会更新插入符号:

if (realContent.length == 0) {
  console.log("empty");
  $("#textBox").text(" ")
  $("#textBox").text("")
}

如何“刷新”div 并强制更新插入符大小？

Answer 1

CSS 更改后，blur() 元素，然后 focus() 它在 setTimeout 为 0 之后。 (出于某种原因，如果没有 setTimeout，它就无法工作)

https://jsfiddle.net/ber8ouu3/5/

var textbox = document.querySelector('#textBox');
textbox.addEventListener('wheel', function(e) {
  e.preventDefault();
  $("#textBox").css("font-size", 80);
  textbox.blur();
  setTimeout(function() { textbox.focus(); });
});

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="textBox"></div>