3
我的场景是我的页面上有一个表单。我的客户希望能够完全填写表格，而无需触摸鼠标。问题是我有一种“自动完成”功能，它可以通过AJAX搜索我们的数据库中的类似条目，并将它们动态地加载到select元素中。然后，您可以点击您希望“自动填写”表单的条目。我可以关注动态加载的AJAX元素吗？
为了让我的客户满意，我试图找到一种方法来让动态选择元素在加载后获得焦点，以便用户可以按箭头键并进入以选择他们想要的内容，而无需使用鼠标。
google搜索解决方案之后，我曾尝试加入
document.getElementById('ajaxbox').focus();
到的onreadystatechange被触发时调用的函数。我也尝试将该行添加为脚本，并在将选择框写入页面时编写脚本。这些都没有工作（无论是由于我无法确定的原因，或者是因为我收到ajaxbox为空的错误，告诉我它试图在该页面加载页面之前调用focus（））。
任何想法？我可以提供更多信息，但不能提供正常运行的样本页面。 Javascript或JQuery解决方案是首选。编号： 添加了一些代码。第一个函数中引用的URL是一个java servlet，它将动态html写入页面（通过打印作者）。我目前无法改变（由于时间限制）。这是所有继承的代码，所以请让我知道是否有可能/应该改变的事情。我不会被冒犯。
这里是我试图设置焦点的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'> <br> <img src='omscontrol/common/images/loading.gif' width='20'><Font size=1> Loading Content....Please Wait! </Font><br> </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());
我曾尝试将焦点（）添加到脚本，并将其放入最后附加。我不确定这是否可以起作用，但它不适合我。
编辑2： 我添加了document.getElementById（'firstOption'）。focus（）;到两个readyState == 4的最后，如果条件。我可以告诉那个元素当时确实存在，但我的注意力实际上没有任何结果。 （我发现了通过添加
$(document.activeElement).change(function(){
alert("NEWFOCUS: " + document.activeElement.id);
});
我的JSP中。如果这是不可靠的，请告诉我。）
您可以发布日的DOM e目前有哪些代码和标记？ – tjscience
这是我继承的一种复杂的应用程序。哪些部分会有帮助？我不认为显示jsp页面会提供更多信息。你想看看我目前正在关注的地方吗？ – Meyla
这将有所帮助。 – tjscience