更改 contentEditable div 的 css 字体大小后，直观地更新插入符号大小答案

【问题标题】：Visually updating the caret size after a change to css font-size of a contentEditable div更改 contentEditable div 的 css 字体大小后，直观地更新插入符号大小
【发布时间】：2018-04-01 05:38:36
【问题描述】：

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

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

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

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

用户打开应用程序（默认字体大小，插入符号正确）

用户将 font-size 更改为 100（插入符号的大小不根据 font-size 变化）：

用户开始输入（插入符号终于更新）：

当字体大小为空时，我尝试更改div 的内容，但它没有更新插入符号：

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

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

【问题讨论】：

标签： javascript jquery internet-explorer-11 contenteditable caret

【解决方案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>

【讨论】：