2020年8月25日 星期二

ie TextBox onkeyup onchange no work solution

1.當onkeyup做轉大寫,而另外onchange執行額外檢查或onblur。再ie會有問題,但是chrome、firefox都正常onchange先onblur後。

2.ie要能啟用onchange,需透過trigger重新挷定onchange。

3.由於只適用ie所以需排除其他browser。

4.onkeyup由於無法偵測到tab,所以改用onkeydown。

5.使用webform測試。

6.$(this).trigger('change'); 挷定後測試時會造成多觸動一次onblur,所以透過event.preventDefault();中止後續動作。

7.onkeyup造成onchange無作用,只有ie才有。

8.測試browser要記得停掉adlock。

9.因改用onkeydown會造成最後一個字元,如果不是按tab,而是透過滑鼠轉移focus時會產生最後一字元是小寫。

10.測試時改用onkeydown:按tab無啟用onchange。但是透過滑鼠轉移focus確會啟動onchange。

11.當trigger('change')時,但沒有製作onchange,tab後focus還停留原textbox內


    Protected Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender

        TextBox3.Attributes.Add("onchange", "javascript:callchange(this);")

        TextBox3.Attributes.Add("onblur", "javascript:callblur(this);")

        TextBox3.Attributes.Add("onkeydown", "javascript:this.value=this.value.toUpperCase(); var x = window.event.keyCode;console.log('x:::: '+ x ); if(x==9){   var getExplorer = (function() { var explorer = window.navigator.userAgent, compare = function(s) { return (explorer.indexOf(s) >= 0); }, ie11 = (function() { return ('ActiveXObject' in window) })(); if (compare('MSIE') || ie11) { return 'ie'; } else if (compare('Firefox') && !ie11) { return 'Firefox'; } else if (compare('Chrome') && !ie11) { return 'Chrome'; }})();if (getExplorer  =='ie') {          $(this).trigger('change');console.log('changeON'); event.preventDefault();  }  }")

    End Sub


    <form id="form1" runat="server">

          <asp:TextBox ID="TextBox3" runat="server" ></asp:TextBox>

         <asp:TextBox ID="TextBox1" runat="server" onkeydown="this.value=this.value.toUpperCase();" onchange="javascript: callchange(this);" onblur="javascript: callblur(this);"></asp:TextBox>

    </form>

<script type="text/javascript">

    function callblur(res) {

        alert('blur:' + res.value);

        return true;

    }

    function callchange(res) {

        alert('change:' + res.value);

        return true;

    }

 </script>