使用AJAX刷新另一個div後，將焦點設置在textfield上

我一直在關注以下問題，並希望你們能指點我（可能很明顯）的解決方案。使用AJAX刷新另一個div後，將焦點設置在textfield上

我有一個簡單的Web應用程序，它需要輸入一個輸入字段（type =「text」）。當頁面加載時，光標已準備好接受輸入。只要用戶導航（onBlur），AJAX部分就會啓動，我會查找數據庫中的代碼，並根據結果右側的框變爲綠色或保持紅色。

更改後，我希望輸入字段清零並準備好接收新輸入。然而，清除該領域確實有效，但重點不在此列。我嘗試了focus（）和select（），但是沒有去...我試圖在setTimeout中摺疊，不行。使用當前的代碼，它在FF，Chrome和IE中不起作用。我希望你們能給我一個提示。

這是網頁代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript"> 
function checkTicket(tno) { 
    var xmlhttp; 
    if (tno=='') { 
     document.getElementById('inside').innerHTML='0'; 
     document.getElementById('validbox').style.backgroundColor='#FF0000'; 
     return; 
    } 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
    } 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById('inside').innerHTML=xmlhttp.responseText; 
      if (document.getElementById('inside').innerHTML=='1') { 
       document.getElementById('validbox').style.backgroundColor='#00FF00'; 
      } else { 
       document.getElementById('validbox').style.backgroundColor='#FF0000'; 
      } 
      set_focus(); 
     } 
    } 
    xmlhttp.open("GET","check_eticket.php?t="+tno,true); 
    xmlhttp.send(); 
} 
function set_focus() { 
    document.form.ticketnumber.value=''; 
    document.form.ticketnumber.focus(); 
} 
</script> 
</head> 

<body onLoad="set_focus()"> 
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;"> 
    <div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;"> 
     <div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;"> 
      <span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span> 
      <form name="form"> 
       <input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" /> 
      </form> 
     </div> 
     <div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;"> 
      <div id="inside" style="display: none;">0</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-08-22 donald23

嘗試'的setTimeout（函數（）{document.form.ticketnumber.focus（）;}，1）;'值變化可以觸發導致要失去焦點瀏覽器一些行動。 – Prusse

我試着用FF和IE的最新版本，它爲我工作。如果你使用FF，那麼我猜你也使用螢火蟲？如果您將控制檯設置爲「顯示嚴格的錯誤消息」並啓用「show XMLHttpRequest」，那麼您可能會發現一些內容。 –

** TRY的jQuery，使用這個鏈接作爲樣品** [http://stackoverflow.com/questions/1433742/set-focus-to-field-in-div][1] [1]：http://stackoverflow.com/questions/1433742/set-focus-to-field-in-div –

這個問題實際上是很容易的：在「視口」的頁面失去焦點。

網頁上的所有「活動」元素（表單域，錨點）都會收到一個「tabindex」。當您填寫字段並按下「選項卡」時，焦點將轉到下一個「有效」元素。

在您的頁面上，沒有「下一個」元素。然後瀏覽器將焦點設置到瀏覽器界面中的下一個元素：在我的情況下（Firefox 14.01），這個下一個元素是瀏覽器頂部的選項卡。

此標籤不屬於您的網頁。因此，我的瀏覽器可以防止頁面「竊取」焦點。

答案其實很簡單：只需添加一個額外的活動元素即可。對於html4.01，後續標籤可以獲得焦點：A，AREA，BUTTON，INPUT，OBJECT，SELECT和TEXTAREA（請參閱Tab Index on div）。 html5規範告訴我你可以使用tabstop來添加任何html元素到這個列表中，但遺憾的是，這並沒有（還沒有？）爲我工作。

現在，我建議您在頁面中添加一個錨點，如下面的解決方案所示。

<html> 
<head> 
<script type="text/javascript"> 
function checkTicket(tno) { 
    var xmlhttp; 
    if (tno=='') { 
     document.getElementById('inside').innerHTML='0'; 
     document.getElementById('validbox').style.backgroundColor='#FF0000'; 
     return; 
    } 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
    } 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById('inside').innerHTML=xmlhttp.responseText; 
      if (document.getElementById('inside').innerHTML=='1') { 
       document.getElementById('validbox').style.backgroundColor='#00FF00'; 
      } else { 
       document.getElementById('validbox').style.backgroundColor='#FF0000'; 
      } 
      set_focus(); 
     } 
    } 
    xmlhttp.open("GET","check_eticket.php?t="+tno,true); 
    xmlhttp.send(); 
} 
function set_focus() { 
    document.form.ticketnumber.value=''; 
    document.form.ticketnumber.focus(); 
} 
</script> 
</head> 

<body onLoad="set_focus()"> 
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;"> 
    <div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;"> 
     <div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;"> 
      <span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span> 
      <form name="form"> 
       <input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" /> 
      </form> 
     </div> 
     <div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;"> 
      <div id="inside" style="display: none;">0</div> 
     </div> 
     <a href="">bang!</a> 
    </div> 
</div> 
</body> 
</html>

來源

2012-08-22 18:31:36 Scharrels

我懷疑我只是錯過了一些明顯的東西......我看到了讓我的行爲在IE中選擇地址欄相當不錯。仍然沒有聽到DIV沒有注意到的鐘聲。 – donald23

使用AJAX刷新另一個div後，將焦點設置在textfield上

回答

相關問題