3

我的情况是我的页面上有一个表单。我的客户希望能够完全填写表格而无需触摸鼠标。问题是我有一种“自动完成”功能，可以搜索我们的数据库（通过 AJAX）寻找类似的条目，并将它们动态加载到一个选择元素中。然后，您可以单击您希望“自动完成”表单的条目。

为了取悦我的客户，我试图找到一种方法让动态选择元素在加载后获得焦点，以便用户可以按下箭头键并输入以选择他们想要的内容，而无需使用鼠标。

在谷歌搜索解决方案后，我尝试添加

    document.getElementById('ajaxbox').focus();

进入触发 onreadystatechange 时调用的函数。我还尝试将该行添加为脚本，并在将选择框写入页面时写入脚本。这些都不起作用（由于我无法确定的原因，或者因为我收到 ajaxbox 为空的错误，告诉我它试图在框加载到页面上之前调用 focus() ）。

有任何想法吗？我可以提供更多信息，但不能提供功能示例页面。首选 Javascript 或 JQuery 解决方案。

编辑：添加了一些代码。第一个函数中引用的 URL 指向将动态 html 写入页面（通过打印编写器）的 java servlet。我目前无法真正改变这一点（由于时间限制）。这都是继承的代码，所以如果有什么可以/应该改变的，请告诉我。我不会生气的。

这是我试图设置焦点的 javascript 的一部分。

    function xmlreqGET(url) {
//alert('ajax');
    var xmlhttp=false;
    var xmlreq;
    try {
if (window.XMLHttpRequest) { // Mozilla, etc.
            xmlhttp=new XMLHttpRequest();
            xmlreq = new CXMLReq('', xmlhttp);
            xmlreqs.push(xmlreq);
            urlAr.push(url);
            xmlhttp.onreadystatechange = xmlhttpChange;
            //alert(url);
            xmlhttp.open("GET",url,true);
            xmlhttp.send(null);
} else if (window.ActiveXObject) { // IE
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    if (xmlhttp) {
                    xmlreq = new CXMLReq('', xmlhttp);
                    xmlreqs.push(xmlreq);
        xmlhttp.onreadystatechange = xmlhttpChange;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();

    }
        }
    } catch (e) { }
  }


function xmlhttpChange() {
if (typeof(window['xmlreqs']) == "undefined") {
        return;
    }
    try {

    if (window.ActiveXObject) { // IE
        for (var i=0; i < xmlreqs.length; i++) {

                if (xmlreqs[i].xmlhttp.readyState == 4) {
                        if (xmlreqs[i].xmlhttp.status == 200 || xmlreqs[i].xmlhttp.status == 304) {
                                // 200 OK
                                // get response info here before splicing - see below on creating an xml object
                                var response = xmlreqs[i].xmlhttp.responseText;
                                //alert(name + '     ' + response);
                                if (name != "assignCase")
                                    document.getElementById(div_id).style.top = 15;
                                    document.getElementById(div_id).style.left = 50;
                                if (name == "streetName" || name == "equipName")
                                    document.getElementById(div_id).style.top = 400;
                                    document.getElementById(div_id).style.left = 50;
                                if (name == "equipment" ) {
                                    document.getElementById(div_id).style.top = 150;
                                    document.getElementById(div_id).style.left = 475;
                                }

                                document.getElementById(div_id).innerHTML = response;

                                xmlreqs.splice(i,1); i--;
                                urlAr.splice(i,1); i--;

                        } else {
                                xmlreqs.splice(i,1); i--;
                                urlAr.splice(i,1); i--;
                        }
                }
        }
   } else {
       //alert('at else');
        for (var i=0; i < xmlreqs.length; i++) {
      //alert(i + ':' + name + ':' + xmlreqs.length);
                if (xmlreqs[i].xmlhttp.readyState == 4) {
                        if (xmlreqs[i].xmlhttp.status == 200 || xmlreqs[i].xmlhttp.status == 304) {
                                // 200 OK
                                // get response info here before splicing - see below on creating an xml object
                               // alert('200 was here' + name);
                                var response = xmlreqs[i].xmlhttp.responseText;
                                var len = response.length;
                                if (name == "streetName" || name == "equipName" || name == "city" || name == "zip" || name == "grid") {
                                    document.getElementById(div_id).style.top = 270;
                                    document.getElementById(div_id).style.left = 50;
                                } else if (name == "upstream"){
                                      document.getElementById(div_id).style.left = 600;
                                      document.getElementById(div_id).style.top = 150;
                                } else if (name == "equipment" ) {
                                    document.getElementById(div_id).style.top = 125;
                                    document.getElementById(div_id).style.left = 500;
                                } else if (name == "pingMeter"){
                                    document.getElementById(div_id).style.left = 1025;
                                    document.getElementById(div_id).style.top = 210;
                                } else if (name == "assignCase") {
                                    //document.getElementById(div_id).style.top = 60;
                                    //document.getElementById(div_id).style.left = 120;
                                } else {
                                    document.getElementById(div_id).style.top = 400;
                                    document.getElementById(div_id).style.left = 50;
                                }

                                document.getElementById(div_id).innerHTML = response;

                                if (response == "") {
                        //            xmlreqGET(urlAr[i]);
                                    xmlreqs.splice(i,1); i--;
                                    urlAr.splice(i,1); i--;
                                } else {
                                    //document.getElementById(div_id).innerHTML = response;
                                    xmlreqs.splice(i,1); i--;
                                    urlAr.splice(i,1); i--;
                                }
                        }

                }
               if (xmlreqs[i].xmlhttp.readyState < 4) {
                  // confirm('at nloading');
                        document.getElementById(div_id).style.top = 270;
                        document.getElementById(div_id).style.left = 50;    
                        document.getElementById(div_id).innerHTML = "<div align=center class='fixedwidth' style='background-color:#ffff8f'>&nbsp;<br>&nbsp; &nbsp;<img src='omscontrol/common/images/loading.gif' width='20'><Font size=1> Loading Content....Please Wait!&nbsp; &nbsp;</Font><br>&nbsp;</div>";
                        } 
        }
   }
    alert(document.getElementById('firstOption'));
    document.getElementById('firstOption').focus();
   } catch (e) { }


    }

servlet 中关于如何编写 HTML 的示例。这不是我现在想要改变的东西。

    comboOption = new StringBuffer();
                        /* Version 1.0.2 */
                        comboOption.append("<select id=\"" + id + "\" class='fixedwidth' style=\'background-color:#ffff8f\' size='4' "
                                + "onchange=\"popVal(this.options[this.selectedIndex].value); populateValues('" + id + "');\">");
                        comboOption.append("<option value=''>" + "No Matches Found!" + "</option>");
                        /* Version 1.0.2 */

                    comboOption.append("</select>");
                    out.print(comboOption.toString());

我曾尝试将 focus() 添加到脚本中，并将其放入最后一个追加中。我不确定这是否可行，但它不适合我。

编辑 2：我添加了 document.getElementById('firstOption').focus(); 到最后两个readyState == 4 if 条件。我可以说那个元素当时确实存在，但我的关注点实际上什么都没有。（我发现通过添加

    $(document.activeElement).change(function(){
                        alert("NEWFOCUS: " + document.activeElement.id);
                    });

到我的 JSP。如果这不可靠，请告诉我。）

4

1 回答 1

1

在调用焦点函数之前，您必须先将输入元素附加到 DOM

var div = document.getElementById("dynamic");
$.ajax({
   ...
   success:function (data) {
     // append the new created input to the DOM
     ....
     div.appendChild(newInput);
     newInput.focus();

   }
});

您可能正试图ajaxbox在它出现在 DOM 之前进行访问，这就是您获得null

于 2012-06-13T16:25:11.550 回答