Question

最近我正在维护一个遗留项目。我在页面中发现了一个javascript死循环问题。演示代码如下。当用户单击第一个输入框并键入3然后直接单击第二个输入框时，就会发生死循环。现在我的问题是解决或预防这类问题的最佳方法是什么？非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>

<input type="text" name="a" id="a" value="" />
<input type="text" name="b" id="b" value="" />

<script type="text/javascript" charset="utf-8">
var a = document.getElementById("a");
a.onblur = function(){
    if(a.value.length === 1){
        alert("aaa");
        a.focus();
        a.select();
        return false;
    }
}

var b = document.getElementById("b");
b.onblur = function(){
    if(b.value < a.value){
        alert("bbb");
        b.focus();
        b.select();
        return false;
    }
}
</script>
</body>
</html>

Answer 1

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>

<input type="text" name="a" id="a" value="" />
<input type="text" name="b" id="b" value="" />

<script type="text/javascript" charset="utf-8">
var a = document.getElementById("a");
a.onblur = function() {
    a.validCheck = false;
    if(a.value.length === 1){
        alert("aaa");
        a.focus();
        a.select();
        return false;
    }
    a.validCheck = true;
}

var b = document.getElementById("b");
b.onblur = function() {
    if (!a.validCheck) return true;
    if(b.value < a.value){
        alert("bbb");
        b.focus();
        b.select();
        return false;
    }
}
</script>
</body>
</html>

另外我在Firefox中没有任何循环问题，尽管它没有按预期运行。我假设这只是IE浏览器。

Answer 2

这适用于IE。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>

<body>
    <input id="a" name="a" type="text" value="" />
    <input id="b" name="b" type="text" value="" />

    <script charset="utf-8" type="text/javascript">
var bInBlurA = false;
var a = document.getElementById("a");
a.onblur = function(){
    if (bInBlurB) return;
    if(a.value.length === 1){
        bInBlurA = true;
        alert("aaa2");
        a.focus();
        a.select();
    }
}

var bInBlurB = false;
var b = document.getElementById("b");
b.onblur = function(){
    if (bInBlurA) return;
    if(b.value < a.value){
        bInBlurB = true;
        alert("bbb2");
        b.focus();
        b.select();
    }
}
a.onfocus  = function()
{
    bInBlurA = false;
}
b.onfocus = function()
{
    bInBlurB = false;
}
    </script>

</body>
</html>

Answer 3

这条线是什么意思：

if(b.value < a.value){

如果您要比较长度，请执行以下操作：

if(b.value.length < a.value.length){

或者如果你想检查它们是否相等，那么：

if(b.value == a.value){

或者

if(b.value != a.value){

解决这种javascript死循环的最佳方法是什么？

3 个答案: