计数器不根据功能改变颜色
Counter is not changing color according to the function
当我达到 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 之前声明变量,您将传递原始值。最好在按键功能中再次检查 length/value。
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");
}
}
}
`
希望对您有所帮助!
onkeypress
不适合这种情况。您可以使用 onkeyup
或 oninput
事件。要将输入限制为一定长度,您可以使用 maxlength
属性。
尝试以下方式:
function ceScriu(el){
var divInput = document.querySelector("[name='divul']");
var div = el.value.trim().length;
document.querySelector("[name='divul']").textContent = div;
if(div === 10){
divInput.classList.add("counter");
}
else{
divInput.classList.remove("counter");
}
}
.counter{
color:red;
}
<input name="nume" oninput="ceScriu(this)" maxlength="10"/>
<div name="divul"></div>
您需要先定义一个样式“.counter”并将脚本和样式放在标签中,当您尝试按 11 次时您的代码有效,如果我输入 1234567890 并尝试输入另一个,样式会改变并且设置红色
.counter{
color:red;
width:100px;
}
<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){
document.querySelector("[name='divul']").classList.add("counter");
event.preventDefault();
}else{
divInput.classList.remove("counter");
}
}
}
</script>
</head>
感谢您的所有回答。他们中的一些人提供了帮助,并使我得到了这个结果。
看来我需要做的只是再添加 2 个 IF 语句。
我在这里添加代码。
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 >9){
event.preventDefault();
}else{
divInput.classList.remove("counter");
}
}
if(div<10){
divInput.classList.remove("counter");
}
if(div>9){
document.querySelector("[name='divul']").classList.add("counter");
}
}
当我达到 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 之前声明变量,您将传递原始值。最好在按键功能中再次检查 length/value。
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");
}
}
}
`
希望对您有所帮助!
onkeypress
不适合这种情况。您可以使用 onkeyup
或 oninput
事件。要将输入限制为一定长度,您可以使用 maxlength
属性。
尝试以下方式:
function ceScriu(el){
var divInput = document.querySelector("[name='divul']");
var div = el.value.trim().length;
document.querySelector("[name='divul']").textContent = div;
if(div === 10){
divInput.classList.add("counter");
}
else{
divInput.classList.remove("counter");
}
}
.counter{
color:red;
}
<input name="nume" oninput="ceScriu(this)" maxlength="10"/>
<div name="divul"></div>
您需要先定义一个样式“.counter”并将脚本和样式放在标签中,当您尝试按 11 次时您的代码有效,如果我输入 1234567890 并尝试输入另一个,样式会改变并且设置红色
.counter{
color:red;
width:100px;
}
<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){
document.querySelector("[name='divul']").classList.add("counter");
event.preventDefault();
}else{
divInput.classList.remove("counter");
}
}
}
</script>
</head>
感谢您的所有回答。他们中的一些人提供了帮助,并使我得到了这个结果。 看来我需要做的只是再添加 2 个 IF 语句。 我在这里添加代码。
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 >9){
event.preventDefault();
}else{
divInput.classList.remove("counter");
}
}
if(div<10){
divInput.classList.remove("counter");
}
if(div>9){
document.querySelector("[name='divul']").classList.add("counter");
}
}