当我达到 10 个字符时，计数器需要变红。当我达到 10 个字符时，我必须再次按任意按钮才能使计数器变为红色。当我删除字符时，计数器保持红色而不是变回黑色。
<script>
function ceScriu(){
var numeInput = document.querySelector("[name='nume']");
var nume = numeInput.value;
var nu = nume.toString().toLowerCase();
var divInput = document.querySelector("[name='divul']");
var div = nu.length;
document.querySelector("[name='divul']").innerHTML = div;
numeInput.onkeypress = function(){
if(div === 10){
event.preventDefault();
divInput.classList.add("counter");
}else{
divInput.classList.remove("counter");
}
}
}
</script>
我希望当我输入第 10 个字符时计数器变红，当我到达第 10 个字符后开始删除字符时我希望计数器变回黑色。
最佳答案
1.) 通过在 onkeypress 之前声明变量，您将传递原始值。最好在按键功能中再次检查长度/值。
2.) Onkeypress 不适用于退格键。您应该使用“onkeyup”来检测退格变化。
3.) 如果你想检测10个或更多字符(并保持框红色直到长度小于10)，你应该使用div >= 10作为比较(超过或等于 10)
`
function ceScriu(){
// *1
var numeInput = document.querySelector("[name='nume']");
var nume = numeInput.value;
var nu = nume.toString().toLowerCase();
var divInput = document.querySelector("[name='divul']");
var div = nu.length;
document.querySelector("[name='divul']").innerHTML = div;
// *2 numeInput.onkeypress = function(){
/* New event check*/
numeInput.onkeyup = function(){
/* End new event check*/
/* New length Check */
let nume = numeInput.value;
let nu = nume.toString().toLowerCase();
let div = nu.length;
/* End new length check */
// *3 if(div === 10){
/* New comparison */
if(div >= 10){
/* End new comparison */
event.preventDefault();
divInput.classList.add("counter");
}else{
divInput.classList.remove("counter");
}
}
}
`
希望对您有所帮助!
关于javascript - 计数器不根据功能改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57004629/