私のシナリオは、自分のページにフォームがあるということです。私のクライアントは、マウスに触れることなくフォームに完全に入力できるようにしたいと考えています。問題は、私たちの DB (AJAX 経由) で同様のエントリを検索し、それらを select 要素に動的にロードする一種の「オートコンプリート」機能があることです。次に、フォームを「オートコンプリート」したいエントリをクリックすることができます。
私のクライアントを喜ばせるために、動的な選択要素がロードされたらフォーカスを取得する方法を見つけようとしています。これにより、ユーザーは矢印キーを押して、マウスを使用せずに必要なものを選択できます。
解決策をグーグルで調べた後、追加しようとしました
document.getElementById('ajaxbox').focus();
onreadystatechange がトリガーされたときに呼び出される関数に。また、その行をスクリプトとして追加して、選択ボックスがページに書き込まれるときにスクリプトを書き込んでみました。これらのどちらも機能していません (理由を判断できないか、ajaxbox が null であるというエラーが表示され、ボックスがページに読み込まれる前に focus() を呼び出そうとしていることがわかります)。
何か案は？詳細情報を提供できますが、機能するサンプル ページは提供できません。Javascript または JQuery ソリューションが推奨されます。
編集:いくつかのコードを追加しました。最初の関数で参照される URL は、(印刷ライターを介して) 動的な html をページに書き込む Java サーブレットへの URL です。現在、それを実際に変更することはできません（時間の制約のため）。これはすべて継承されたコードなので、変更できる/変更する必要がある場合はお知らせください。私は気分を害することはありません。
これは、フォーカスを設定しようとしていた 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) { }
}
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(); を追加しました。2 つの readyState == 4 if 条件の最後まで。その時点でその要素が存在していたことはわかりますが、実際には私の焦点は何もありません。(追記して分かった。
$(document.activeElement).change(function(){
alert("NEWFOCUS: " + document.activeElement.id);
});
私のJSPに。それが信頼できない場合は、教えてください。）