按键功能在字符打印到屏幕之前运行

Question

我有一个元素位于同一类的3个元素之上。当我在其中一个内容可编辑的div中键入内容时，如果宽度超出了原来的宽度，它就会展开元素。我想将上面的元素设置为与其他3元素的宽度相同。
我遇到的问题是，当我运行keydown()函数时，它在实际字符打印到屏幕之前运行，因此宽度总是太大或太小一个字符。如果我运行keyup()函数，那么它会被延迟，而且很笨重，因为在我的手指按下键之前，字符就会打印到屏幕上。我该如何补救？有没有办法在打印密钥时运行该功能？

$(".tr1").keydown(function() {
var elements = document.getElementsByClassName('tr1');
var totalWidth = 0;
for (var i = 0; i < elements.length; i++) {
totalWidth += elements[i].offsetWidth;
}
document.getElementById("qa-checklist").style.width=''+totalWidth+'px';
});

我添加了一个堆栈：
https://js-ic8uy7.stackblitz.io

Answer 1

oninput事件似乎没有此问题。

<label for="test">Using oninput:</label>
<input type="text" id="test" oninput="console.log(this.value)"></input>

编辑：要在您的示例中执行此操作，请替换"；keydown"；用"；输入"：

document.addEventListener('input', function(event) {
console.log("change");
var elements = document.getElementsByClassName('tr1');
var totalWidth = 0;
for (var i = 0; i < elements.length; i++) {
totalWidth += elements[i].offsetWidth;
}
console.log(totalWidth);
document.getElementById("qa-checklist").style.width=''+totalWidth+'px';
});

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rowcell {
outline: grey;
border: 1px solid black;
min-width: 50px;
}
#qa-checklist {
display: inline-block;
width: 1px;
border-bottom: 50px solid black;
}

<div id="qa-checklist"></div>
<div style="display:flex;">
<div class="rowcell tr1" contenteditable="true"></div>
<div class="rowcell tr1" contenteditable="true"></div>
<div class="rowcell tr1" contenteditable="true"></div>
</div>