更改为contentEditable div

Question

我有contentEditable div用户可以输入的内容。用户可以使用鼠标滚轮更改font-size的{​​{1}}。

我面临的问题：如果div为空并且用户更改div，则插入符号大小不会更改：此行为可能会导致对实际{{1}的混淆} 正在使用。一旦用户开始输入，插入符就会调整到正确的大小。

这是更改font-size：

的代码

font-size

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

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

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

当字体调整大小时，我尝试更改css font-size的内容，如果它是空的，但它没有更新插入符号：

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

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

Answer 1

CSS更改后，blur()元素，然后{set}输出0后的focus() 。 （由于某些原因，没有setTimeout它不起作用）

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

＆＃13;

＆＃13;

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

＆＃13;

div {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;