Каков наилучший способ решить этот тип мертвой петли JavaScript? - PullRequest
Новая
       5

Каков наилучший способ решить этот тип мертвой петли JavaScript?

2 голосов
/ 09 февраля 2010

В последнее время я поддерживаю устаревший проект. Я нашел одну проблему с мертвой петлей 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>

Ответы [ 3 ]

1 голос
/ 12 февраля 2010

Попробуйте это: 

<!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.

1 голос
/ 12 февраля 2010

Это работает в 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>
0 голосов
/ 09 февраля 2010

Что вы подразумеваете под этой строкой: 

if(b.value < a.value){

Если вы сравниваете длину, сделайте следующее: 

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

Или, если вы хотите проверить, равны они или нет, тогда: 

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

Или 

if(b.value != a.value){
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...