删除alert()后,代码的行为会很奇怪

When alert() is removed, code behaves strange

本文关键字:代码 alert 删除      更新时间:2024-06-17

Helo,

我正在构建一个搜索框,提供选择并使用箭头进行导航。它与alert()配合使用效果很好,但如果删除alert,它会高亮显示(=更改背景属性),然后取消高亮显示。在调试器中时,它工作正常。我怀疑事件捕获过多。问题出在哪里。

警报必须在此功能中:

function ChangeCurrentCell() 
{   
        //alert('Row' + currentRow);
        var tableID = document.getElementById("seach_table");
        var tableRow = tableID.getElementsByTagName("tr");
        var cellToLight;
        //checking rows
        total_rows = tableRow.length;
        //alert('Total'+total_rows);
        if (currentRow<0)
        {
            currentRow=0;
        }
        if (currentRow>=total_rows)
        {
            currentRow=total_rows-1;
        }
        // clear everything
        for (var i=0; i < total_rows; i++)
        {
            tableRow = tableID.getElementsByTagName("tr")[i];
            cellToLight = tableRow.getElementsByTagName("td")[0];
            tableRow.style.backgroundColor = "#FFF";
        }
        //hightlight required
        tableID = document.getElementById("seach_table");
        tableRow = tableID.getElementsByTagName("tr")[currentRow];
        cellToLight = tableRow.getElementsByTagName("td")[0];
        tableRow.style.backgroundColor = "#aaa";
    }

HTML:

<input type='edit' id='text_to_search' name='text_to_search' autocomplete="off" value='' 
                                    size='25' onkeyup='return update_search_offer(event);' onkeypress="return check_for_enter_code(event);" onkeydown="return navigate(event);"> 

完整的JavaScript:

function update_search_offer(event)
{
    if (event.keyCode == 27)
    {
        //alert('Hide');
        document.getElementById("text_offer").style.visibility='hidden';
    }
    else
    {
        document.getElementById("text_offer").style.visibility='visible';   
        if (document.getElementById("text_to_search").value == '')
        {
            document.getElementById("text_offer").style.display = "none";
        }
        else
        {
            document.getElementById("text_offer").style.display = "block";
            var word_search = ""+document.getElementById("text_to_search").value;
            $.post("_lookup.php", { query: word_search }).done(function(data) {
                        document.getElementById("seach_table").innerHTML = data;
                        if (data == '')
                        {
                            document.getElementById("text_offer").style.display = "none";
                        }
                });
        }
    }
}
function offer_selected(selection)
{
    document.getElementById("text_to_search").value =selection; 
    document.getElementById("search_button").click();
}
function check_for_enter_code(e)
{
    //alert('Call');
    e = e || window.event;
    if (e.keyCode == 13)
    {
        if (document.getElementById("text_to_search").value == '')
            return false;
        else return true;
    }
    else
        return true;
}
var currentRow = 0;
var total_rows=0;
function ChangeCurrentCell() 
{   
        //alert('Row' + currentRow);
        var tableID = document.getElementById("seach_table");
        var tableRow = tableID.getElementsByTagName("tr");
        var cellToLight;
        //checking rows
        total_rows = tableRow.length;
        //alert('Total'+total_rows);
        if (currentRow<0)
        {
            currentRow=0;
        }
        if (currentRow>=total_rows)
        {
            currentRow=total_rows-1;
        }
        // clear everything
        for (var i=0; i < total_rows; i++)
        {
            tableRow = tableID.getElementsByTagName("tr")[i];
            cellToLight = tableRow.getElementsByTagName("td")[0];
            tableRow.style.backgroundColor = "#FFF";
        }
        //hightlight required
        tableID = document.getElementById("seach_table");
        tableRow = tableID.getElementsByTagName("tr")[currentRow];
        cellToLight = tableRow.getElementsByTagName("td")[0];
        tableRow.style.backgroundColor = "#aaa";
    }
function navigate(event)
{
    if(event.keyCode == 38) //up arrow
    {
        currentRow--;
        ChangeCurrentCell();
        return false;
    }
    else if(event.keyCode == 40) //40 - down arrow
    {
        currentRow++;
        ChangeCurrentCell();
        return false;
    }
}

我明白了。问题出在每次调用并更新表的AJAX方法中。我在函数update_search_offer()中添加了下一个代码:

else if ((event.keyCode == 38) || (event.keyCode == 40))
    {
        // do nothing
    }

所以,如果按下向上或向下键,它不会更新字段。对不起,打扰你了。