BloggerAds

2012年1月18日 星期三

(Chrome、FireFox) JavaScript設定值給TextBox時,無法觸發PostBack的一種解法


如果有使用.NET 中TextBox的OnTextChanged事件,希望在TextBox的文字變動後,在Server端做一些事,通常會像下方這樣用:
ex. <asp:TextBox ID="txt1" runat="server" OnTextChanged="txt1_TextChanged" AutoPostBack="True" />

這個方式在人為操作的狀況下並不會有什麼問題,修改TextBox中的字後,會PostBack去執行程式。但如果修改TextBox中的文字,是使用JavaScript去設定值的話(ex. txt1.value = 'abc'),在各瀏覽器卻會有不同的結果產生,IE 會正常的執行 PostBack,但在Chrome、FireFox卻無法正常的觸發PostBack!

在試過jQuery的一些function後(ex. bind、on、trigger),發現還是沒辦法解決這個問題,最後只好用一個偏方來處理,使用setInterval一段時間就檢查一次TextBox的值,發現值有變動,就執行PostBack,解法如下:

$(document).ready(function() {          
    //非IE才設Interval,因為IE可正常觸發
    if(navigator.userAgent.indexOf("MSIE")==-1) {
        setInterval('detectValueChange();', 500);
    }
});
   
function detectValueChange() {
    currentValue = $('#<%=txt1.ClientID%>').val();
    oldValue = $('#<%=hid1.ClientID%>').val();
         
    if (currentValue != oldValue) {
        //使用<asp:HiddenField>暫存值,讓PostBack後,值還存在 
        $('#<%= hid1.ClientID%>').val(currentValue);
        __doPostBack('<%= txt1.ClientID%>', '');              
    }  
}