javascript - 使用 Javascript 输入只能填充 10 位数字，为什么在 Firefox 上不起作用？

Question

使用 Javascript 输入只能填写 10 位数字，为什么在 Firefox 上不起作用？

填写 EG:0258748542 我在 Chrome 上测试过，效果很好。但不能在 Firefox 上运行，为什么？

我该怎么做？

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

您没有将事件传递给 check_ten_number_length_down() 函数。您也不需要使用空字符串更新值，然后再次使用旧值覆盖它。

function check_ten_number_length_up(ten_number_value){

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

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";
	}
	else
	{
        document.getElementById("ten_number").style.border = "1px solid rgba(72,72,72,0.4)";
        document.getElementById("mySpan_ten_number").innerHTML = "";
	}
}

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>