L'entrée peut remplir seulement 10 chiffres en utilisant Javascript ne fonctionne pas sur Firefox pourquoi?

Question

L'entrée peut remplir seulement 10 chiffres en utilisant Javascript ne fonctionne pas sur Firefox pourquoi?

Remplissez EG: 0258748542 J'ai testé sur le chrome c'est un bon travail. Mais ne fonctionne pas sur firefox Pourquoi?

Comment est-ce que je peux faire ceci?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<input name="ten_number" onkeyup="check_ten_number_length_up(this.value)" onkeydown="return check_ten_number_length_down(this,10);" type="number" class="feedback-input" id="ten_number" placeholder="please enter 10 digits" onchange="updateInput_ten_number(this.value)"> 
 

 

 
<span id="mySpan_ten_number"></span> 
 

 
<script> 
 
function check_ten_number_length_up(ten_number_value){ 
 
\t var ten_number_value = ten_number_value.replace(/[^0-9]+/g, ""); 
 
\t document.getElementById("ten_number").value = ""; 
 
\t document.getElementById("ten_number").value = ten_number_value; 
 
\t var ten_number_value = document.getElementById("ten_number").value; 
 
\t 
 
\t if(ten_number_value.length==10) 
 
\t { 
 
\t \t document.getElementById("ten_number").style.border = "1px solid rgba(72,72,72,0.4)"; 
 
\t \t document.getElementById("mySpan_ten_number").innerHTML = ""; 
 
\t } 
 
\t else 
 
\t { 
 
\t \t document.getElementById("ten_number").style.border = "1px solid red"; 
 
\t \t document.getElementById("mySpan_ten_number").innerHTML = "please enter 10 digits"; 
 
\t } 
 
} 
 
</script> 
 

 

 
<script> 
 
function updateInput_ten_number(ten_number_value){ 
 
    var ten_number_value_length = ten_number_value.length; 
 
    if(ten_number_value_length != "10") 
 
    { 
 
     document.getElementById("ten_number").style.border = "1px solid red"; 
 
     document.getElementById("mySpan_ten_number").innerHTML = "please enter 10 digits"; 
 
\t } 
 
\t else 
 
\t { 
 
     document.getElementById("ten_number").style.border = "1px solid rgba(72,72,72,0.4)"; 
 
     document.getElementById("mySpan_ten_number").innerHTML = ""; 
 
\t } 
 
} 
 
</script> 
 

 
<script> 
 
function check_ten_number_length_down(ten_number_value,max_length){ 
 
    if([8, 37,38,39,40, 46].indexOf(event.which) == -1) 
 
    { 
 
     return ten_number_value.value.length < max_length; 
 
    } 
 
} 
 
</script>

Answer 1

Vous ne passez pas votre événement à la fonction check_ten_number_length_down(). Vous n'avez également pas besoin de mettre à jour la valeur avec une chaîne vide uniquement pour l'écraser à nouveau avec l'ancienne valeur.

function check_ten_number_length_up(ten_number_value){ 
 

 
\t var ten_number_value = ten_number_value.replace(/[^0-9]+/g, ""); 
 
\t 
 
\t if(ten_number_value.length==10) 
 
\t { 
 
\t \t document.getElementById("ten_number").style.border = "1px solid rgba(72,72,72,0.4)"; 
 
\t \t document.getElementById("mySpan_ten_number").innerHTML = ""; 
 
\t } 
 
\t else 
 
\t { 
 
\t \t document.getElementById("ten_number").style.border = "1px solid red"; 
 
\t \t document.getElementById("mySpan_ten_number").innerHTML = "please enter 10 digits"; 
 
\t } 
 
} 
 

 
function updateInput_ten_number(ten_number_value){ 
 
    var ten_number_value_length = ten_number_value.length; 
 
    if(ten_number_value_length != "10") 
 
    { 
 
     document.getElementById("ten_number").style.border = "1px solid red"; 
 
     document.getElementById("mySpan_ten_number").innerHTML = "please enter 10 digits"; 
 
\t } 
 
\t else 
 
\t { 
 
     document.getElementById("ten_number").style.border = "1px solid rgba(72,72,72,0.4)"; 
 
     document.getElementById("mySpan_ten_number").innerHTML = ""; 
 
\t } 
 
} 
 

 
function check_ten_number_length_down(event, ten_number_value, max_length){ 
 
    if([8, 37,38,39,40, 46].indexOf(event.which) == -1) 
 
    { 
 
     return ten_number_value.value.length < max_length; 
 
    } 
 
}

input[type=number] {-moz-appearance: textfield;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<input name="ten_number" onkeyup="check_ten_number_length_up(this.value)" onkeydown="return check_ten_number_length_down(event, this, 10);" type="number" class="feedback-input" id="ten_number" placeholder="please enter 10 digits" onchange="updateInput_ten_number(this.value)"> 
 

 

 
<span id="mySpan_ten_number"></span>