input 輸入框屬性事件


1、IE 上的專屬事件 onpropertychange 事件來監聽輸入框內容的變化 

      親測在IE8 以上都是可以的

2、oninput 是Html5 的標准事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生的內容變化非常有用,在內容變化后立即觸發該事件。

    

        oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,這個事件在用戶界面改變或者使用腳本直接修改內容兩種情況下都會觸發,有以下幾種情況:

  • 修改了 input:checkbox 或者 input:radio 元素的選擇中狀態, checked 屬性發生變化。
  • 修改了 input:text 或者 textarea 元素的值,value 屬性發生變化。
  • 修改了 select 元素的選中項,selectedIndex 屬性發生變化

在監聽到 onpropertychange 事件后,可以使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。

  集合 oninput & onpropertychange 監聽輸入框內容變化的示例代碼如下:

   <script type= "text/javascript" >
    <!--  Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 -->
         function  OnInput (event) {
             alert ( "The new content: "  + event.target.value);
         }
    <!--Internet Explorer-->
     function  OnPropChanged (event) {
        if  (event.propertyName.toLowerCase () ==  "value" ) {
            alert ( "The new content: "  + event.srcElement.value);
           }
         }
     </script>
<input type= "text"  oninput= "OnInput (event)"  onpropertychange= "OnPropChanged (event)"  value= "Text Value"  placeholder=''請輸入xxx" />
使用 JQuery,只需要同時綁定 oninput 和 onpropertychange 兩個事件就可以了,示例如下:
$( 'textarea' ).off('input propertychange').on( 'input propertychange' function () {
   $( '#msg' ).html($( this ).val().length +  ' characters' );
});
 注: oninput 和  onpropertychange 這兩個事件在 IE9 中都有個小BUG,那就是通過右鍵菜單,菜單中的剪切和刪除命令刪除內容的時候不會觸發,而 IE 其他版本都是正常的
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM