驗證碼javascript在Chrome中無法正常工作

我使用了下面的腳本來驗證它在IE中的工作號碼，但它不適用於新版本的Chrome。如果輸入大於5，則顯示警報窗口但無法關閉，我必須關閉所有Chrome窗口。怎麼修？驗證碼javascript在Chrome中無法正常工作

<HTML> 

<HEAD> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 



<script> 
function validate(textarea) 
{ 
    var wanted = "12345" 
    var check ; 
    var x ; 
    for (var i=0; i<textarea.value.length; i++) 
    { 
     x = "" +textarea.value.substring(i, i+1); 
     if (wanted.indexOf(x) == "-1") check = "stop"; 
    } 
    if (check== "stop") 
    { 
     alert("use only numbers from 1 to 5 "); 
     textarea.focus(); 
     textarea.select(); 
    } 

    if (textarea.value.length > 1) 
    { 
     alert("use only numbers from 1 to 5 "); 
     textarea.focus(); 
     return (false); 
    } 
} 
    </script> 
</HEAD> 
<BODY> 

<FORM name="game" > 

    <table align="center" border="0" width="225" bgcolor="#FFFFF0" > 

    <TR><TD colspan="9">Fill the cells with digits 1-5, only one time each.  </TD></TR> 
<TR><TD><INPUT name="a1" size="1" value="" onBlur="validate(this)"><TD> <B>&nbsp;</B></TD> 
    <TD><INPUT name="a2" size="1" onBlur="validate(this)"></TD> 
    <TD><B>&nbsp;</B></TD> 
    <TD><INPUT name="a3" size="1" value="" onBlur="validate(this)"> 
    </TD><TD><B>&nbsp;</B></TD> 
    <TD><INPUT name="a4" size="1" onBlur="validate(this)"></TD> 
    <TD><B>&nbsp; </B></TD> 
    <TD><INPUT name="a5" size="1" onBlur="validate(this)"></TD> 
    </TR> 

    </FORM> 

</TABLE> 
    </BODY>

來源

2017-01-04 user1729894

您的腳本基本上進入死循環，因爲雙焦點，除此之外Chrome並有警報，難點和重點：

當數不爲1〜5被檢測到，stop如 - 事件將焦點帶入輸入。然而，第二個if子句也會聚焦元素，這會觸發blur-event重新啓動驗證函數。

這裏有一個可行的例子。我已使用Regex更新了驗證碼。它通過執行否定搜索來檢查textarea中的值是否與1-5匹配。所以如果任何值不匹配，設置爲check到stop。

之後，我添加了焦點和選擇的超時，在alert被觸發後觸發5毫秒，導致Chrome不進入模糊焦點循環。

此外，我還添加了maxlength-屬性限制輸入僅限一個字符的輸入。

function validate(textarea) { 
 
    var wanted = "12345" 
 
    var check; 
 
    var x; 
 
    if (textarea.value.match(/[^1-5]/g)) { 
 
    check = "stop"; 
 
    } 
 

 
    if (textarea.value.length > 1 || check == "stop") { 
 
    alert("use only one number from 1 to 5"); 
 
    setTimeout(function() { 
 
     textarea.focus(); 
 
     textarea.select(); 
 
    }, 5); 
 
    return false; 
 

 
    } 
 
}

<form name="game"> 
 

 
    <table align="center" border="0" width="225" bgcolor="#FFFFF0"> 
 

 
    <TR> 
 
     <TD colspan="9">Fill the cells with digits 1-5, only one time each.</TD> 
 
    </TR> 
 
    <TR> 
 
     <TD> 
 
     <INPUT name="a1" size="1" maxlength="1" value="" onBlur="validate(this)" /> 
 
     <TD> 
 
      <B>&nbsp;</B> 
 
     </TD> 
 
     <TD> 
 
      <INPUT name="a2" size="1" maxlength="1" onBlur="validate(this)" /> 
 
     </TD> 
 
     <TD> 
 
      <B>&nbsp;</B> 
 
     </TD> 
 
     <TD> 
 
      <INPUT name="a3" size="1" maxlength="1" value="" onBlur="validate(this)" /> 
 
     </TD> 
 
     <TD> 
 
      <B>&nbsp;</B> 
 
     </TD> 
 
     <TD> 
 
      <INPUT name="a4" size="1" maxlength="1" onBlur="validate(this)" /> 
 
     </TD> 
 
     <TD> 
 
      <B>&nbsp;</B> 
 
     </TD> 
 
     <TD> 
 
      <INPUT name="a5" size="1" maxlength="1" onBlur="validate(this)" /> 
 
     </TD> 
 
    </TR> 
 
    </table> 
 
</form>

來源

2017-01-04 13:41:30 Mouser

驗證碼javascript在Chrome中無法正常工作

回答

相關問題