js获取某个控件的集合并添加属性或事件

   有时候我们要获取一个对象的集合并给此对象添加属性和时间,虽然用cs代码也能实现但总要写一堆的FindControl

本来我们用的服务器控件在客户端展示出来就是html标签,所以理所当然的我们就可以用js实现这样的功能。以一组asp:TextBox控件为例子。

界面很简单

 1

首先我们给这五个textbox控件加上不能为空的value;

Code
<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的时候验证此文本框是否为空,并提示对话框!)代码如下

Code
 <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');

以上仅仅只是说明批量给某类型的服务器控件添加属性或事件,可能还有错误请谅解。

原文地址:https://www.cnblogs.com/zmxmiss/p/1450482.html