js獲取某個控件的集合並添加屬性或事件

   有時候我們要獲取一個對象的集合並給此對象添加屬性和時間，雖然用cs代碼也能實現但總要寫一堆的FindControl

本來我們用的服務器控件在客戶端展示出來就是html標籤，所以理所當然的我們就可以用js實現這樣的功能。以一組asp:TextBox控件爲例子。

界面很簡單

 

首先我們給這五個textbox控件加上不能爲空的value；

 

 

 

<script language="javascript">
        document.body.onload = function resets() {
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) { if (controls[i].type == 'text') {

                             controls[i].value = "不能爲空！"; //給指定的text添加value          };
                                 }
            }

        } 

    </script>

 

 現在添加一個onfocus事件（聚焦的時候清空此textbox的值）和一個onblur事件（在離開此textbox的時候驗證此文本框是否爲空，並提示對話框！）代碼如下

 

 

 <script language="javascript">
        document.body.onload = function resets() {
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) {
                if (controls[i].type == 'text') {
                    controls[i].value = "不能爲空！"; //給指定的text添加value
                    controls[i].onfocus = function() { this.value = ''; }; //聚焦清空text的值
                    controls[i].onblur = function() {
                        if (!this.value.replace(/(^\s*)|(\s*$)/g, "")) {
                            alert(this.value + "不能爲空");
                            this.focus;
                        }
                    };
                    //給指定的text添加onblur事件 判斷是否爲空！
                }
            }

        } 

    </script>

 

效果如下：

效果實現了 但是問題來了 我們的頁面上可能還有別的文本框 ，這段js也會對別的文本框有效果，繼續改造

我們可以把這幾個文本框放到一個table 或div 裏面 通過id 來就能限制此js的作用的範圍:

 var controls = document.getElementById('OneTable').getElementsByTagName('input');

以上僅僅只是說明批量給某類型的服務器控件添加屬性或事件，可能還有錯誤請諒解。