当只有一个input的时候按回车键时，input会默认提交表单

原本笔者是想练习一下输入提示这个功能的，在写这个小例子的时候确发现了一个很奇怪的事，如下：

我是想实现如下图的功能：

在输入框输入字符，匹配显示包含输入字符的记录，按上下键可以从结果中选择，本想在结果上点击回车键就选中此记录的，但在只有一个<input>的情况下按下回车键居然会直接提交表单了，笔者水平有限，知其然而不知其所以然，只知道如果加多一个<input>标记就不会提交表单，这里希望得到高手们的详细解释。。。

先上代码：

<script language="javascript" type="text/javascript">
    //创建XMLHttpRequest对象
    function createXMLHttpRequest()
    {
        var obj;
        if (window.XMLHttpRequest)
        { //Mozilla 浏览器
            obj = new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        { // IE浏览器
            try {obj = new ActiveXObject("Msxml2.XMLHTTP");}
            catch (e)
            {
                try { obj = new ActiveXObject("Microsoft.XMLHTTP"); }
                catch (e) { }
            }
        }
        return obj;
    }

    //当输入框的内容变化时，调用该函数
    function searchSuggest(evn) {
        if (evn.keyCode == "40" || evn.keyCode == "38" || evn.keyCode == "13") {
            keyDown(evn.keyCode);
        }
        else {
            var inputField = document.getElementById("txtSearch");
            var suggestText = document.getElementById("search_suggest");
            if (inputField.value.length > 0) {
                var o = createXMLHttpRequest();
                var url = "Server.aspx?searchText=" + escape(inputField.value);
                o.open("GET", url, true);
                o.onreadystatechange = function () {
                    if (o.readyState == 4) {
                        if (o.status == 200) {
                            var sourceText = o.responseText.split("\n");
                            if (sourceText.length > 1) {
                                suggestText.style.display = "";
                                suggestText.innerHTML = "";
                                for (var i = 0; i < sourceText.length - 1; i++) {
                                    var s = '<div οnmοuseοver="javascript:suggestOver(this);"';
                                    s += ' οnmοuseοut="javascript:suggestOut(this);" ';
                                    s += ' οnclick="javascript:setSearch(this.innerHTML);" ';
                                    s += ' class="suggest_link">' + sourceText[i] + '</div>';
                                    suggestText.innerHTML += s;
                                }
                            }
                            else { suggestText.style.display = "none"; }
                        }
                    }
                }; //指定响应函数
                o.send(null); // 发送请求
            }
            else { suggestText.style.display = "none"; }
        }
    }

    function suggestOver(div_value) { div_value.className = "suggest_link_over"; }

    function suggestOut(div_value) { div_value.className = "suggest_link"; }

    function setSearch(obj)
    {
        document.getElementById("txtSearch").value = obj;
        var div = document.getElementById("search_suggest");
        div.innerHTML = "";
        div.style.display = "none";
    }

    function tbblur()
    {
        var div = document.getElementById("search_suggest");
        //div.innerHTML = "";
        div.style.display = "none";
    }

    var index = -1; //表示当前选中的行索引
    function keyDown(the_key) {
        //判断提示DIV是否是现实状态
        if (document.getElementById("search_suggest").style.display != "none") {
            //获取里面所用行
            var my_div = document.getElementById("search_suggest").getElementsByTagName("div");
            var the_num = my_div.length;
            switch (the_key) {
                case 40: //向下
                    //判断index是否已经到最下面
                    if (index == the_num - 1) {
                        index = 0;
                    } else {
                        index++;
                    }  
                    for (var i = 0; i < the_num; i++) { my_div[i].className = null; }//清楚所有选中
                    my_div[index].className = "suggest_link_over";
                    break;
                case 38: //向上
                    //判断index是否已经到最上面
                    if (index == 0) {
                        index = the_num - 1;
                    } else { index--; }
                    for (var i = 0; i < the_num; i++) { my_div[i].className = null; } //清楚所有选中
                    my_div[index].className = "suggest_link_over";
                    break;
                case 13: //回车
                    //将选中的内容放入文本框中
                    if (my_div[index].innerHTML != null) { document.getElementById("txtSearch").value = my_div[index].innerHTML; }
                    break;
            }

        }
    }

</script>

<body>
    <form id="form1" action="" οnsubmit="alert('提交了！')">
        <div style="text-align:center;" ><h2>(AJAX-JS)实现输入提示</h2></div>
        <div style="text-align:center;" >
        <input type="text" id="txtSearch" name="txtSearch" autocomplete="off" οnkeyup="searchSuggest(event);"
                size="20" class="input_out"
                οnfοcus="this.className='input_on';this.οnmοuseοut=''"
                οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"
                οnmοusemοve="this.className='input_move'"
                οnmοuseοut="this.className='input_out'" style="width: 200px" /><br />
                <div style="width:205px;text-align:center;margin-right:auto;margin-left:auto; display: none;" id="search_suggest" ></div>
        </div>
    </form>
</body>

1.只有一个<input>的情况下，上下选择结果后按回车键（表单提交了），结果如下图：

按回车后就所有清空了：

2.但是，如果我加多了一个<input>标记之后，选中记录后按回车键就不会提交表单：

<body>
    <form id="form1" action="" οnsubmit="alert('提交了！')">
        <div style="text-align:center;" ><h2>(AJAX-JS)实现输入提示</h2></div>
        <div style="text-align:center;" >
        <input type="text" id="txtSearch" name="txtSearch" autocomplete="off" οnkeyup="searchSuggest(event);"
                size="20" class="input_out"
                οnfοcus="this.className='input_on';this.οnmοuseοut=''"
                οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"
                οnmοusemοve="this.className='input_move'"
                οnmοuseοut="this.className='input_out'" style="width: 200px" /><br />
                <div style="width:205px;text-align:center;margin-right:auto;margin-left:auto; display: none;" id="search_suggest" ></div>
        </div>
        <!--注意：当只有一个input的时候按回车键会提交，故需要加多一个input控件！-->
        <input style="display:none;" id="Text1" type="text" />
    </form>
</body>

结果图：

综述：在表单内，如果只有一个<input>标记的时候按下回车键，此<input>标记会变为submit类型提交表单，但如果有2个或以上<input>标记则不会提交表单，希望得到详细的解释！