Javascript 不正确地计算图元的宽度

我试图计算块的宽度，

id=“titleText”

我得到了一些运气，尽管它计算不正确

例如，当为空时，它仍显示像素（默认情况下，它应为1），但18px仍保留在此示例中：

（使用

onkeydown

）

（使用

onkeyup

）

而且

在我指定的编号之前触发我的样式逻辑，该编号为

585

。

我的HTML是：

<input type="text" autocomplete="off" id="serpTitle" 
onkeydown="checkTitleValue()" class="form-control" />

<p class="d-block" id="titleText"></p>

还有Javascript

function checkTitleValue() {
    var fontSize = 12;
    var measureTitle = document.getElementById("titleText");
    measureTitle.style.fontSize = fontSize;
    var height = (measureTitle.clientHeight + 1) + "px";
    var width = (measureTitle.clientWidth + 1) + "px"
    var inputTitle = document.getElementById("serpTitle").value;

    document.getElementById("titleText").innerText = inputTitle;
    document.getElementById("titlePixels").innerText = width;

        if (measureTitle.clientWidth + 1 > 585) {
            document.getElementById("titlePixels").style.color = "red";
        }
        else if (measureTitle.clientWidth + 1 < 585)
        {
            document.getElementById("titlePixels").style.color = null;
        }
    }

函数checkTitleValue（）{
var-fontSize=12；
var measureTitle=document.getElementById（“titleText”）；
measureTitle.style.fontSize=fontSize；
变量高度=（measureTitle.clientHeight+1）+“px”；
变量宽度=（measureTitle.clientWidth+1）+“px”
var inputTitle=document.getElementById（“serpTitle”）.value；
document.getElementById（“titleText”）.innerText=inputTitle；
document.getElementById（“titlePixels”）.innerText=宽度；
if（measureTitle.clientWidth+1>585）{
document.getElementById（“标题像素”）.style.color=“红色”；
}
else if（measureTitle.clientWidth+1<585）
{
document.getElementById（“titlePixels”）.style.color=null；
}
}

您可能应该尝试调用

keyup

上的函数，而不是

keydown

因为每次击键实际上都是在输入框中的

keyup

：意思是。。（之后）按键已“按下”

因此，您的HTML代码可能如下所示：

<input type="text" autocomplete="off" id="serpTitle" 
onkeyup="checkTitleValue()" class="form-control" />

<p class="d-block" id="titleText"></p>

关于更改颜色，其中一个问题是首先更新颜色，然后计算颜色。所以交换

    if (measureTitle.clientWidth > 585) {
        document.getElementById("titlePixels").style.color = "red";
    }
    else if (measureTitle.clientWidth < 585)
    {
        document.getElementById("titlePixels").style.color = null;
    }

    document.getElementById("titleText").innerText = inputTitle;
    document.getElementById("titlePixels").innerText = width;

if（measureTitle.clientWidth>585）{
document.getElementById（“标题像素”）.style.color=“红色”；
}
else if（measureTitle.clientWidth<585）
{
document.getElementById（“titlePixels”）.style.color=null；
}
document.getElementById（“titleText”）.innerText=inputTitle；
document.getElementById（“titlePixels”）.innerText=宽度；

请您尝试一下这个代码片段。我不明白这个

measureTitle.clientWidth+1

或

measureTitle.clientWidth+1<585

const FONT\u SIZE=12；
const MAX_LENGTH=585；
var serpTitle=document.getElementById（'serpTitle'）；
var mesured=document.getElementById（'measured'）；
var maxLength=document.getElementById（'max-length'）；
var measureCont=document.getElementById（'mesure-cont'）；
函数init（）{
measureCont.style.fontSize=字体大小；
maxLength.innerHTML=MAX_LENGTH+'px'；
updateSure（）；
}
函数updateSure（）{
measureCont.innerHTML=serpTitle.value；
mesured.innerHTML=measurent.clientWidth；
}
函数checkTitleValue（）{
updateSure（）；
if（measureCont.clientWidth>MAX_LENGTH）{
measured.style.color='红色'；
}否则{
measured.style.color=null；
}
}
init（）

/
AAAA
不幸的是，这正是我最初尝试的。几乎是同样的行为。我用gif编辑了这个问题，用于
onkeyup
删除onkeydown并使用
onkeyup=“checkTitleValue（）”
尝试添加一些去抖动功能？为了更好地更新，我认为您可以处理keyup和keydown事件。例如，对于keydown计算所有内容和onkeyup更新视图。