选取页面全部TextBox，并赋值的两种方法——从服务器端和JS实现

前言：

     今天看见一面试题，问：如何能够选取页面所有的TextBox，并全部赋值String.Empty？ 我首先想到的就是用JS来实现，可以前比较常见的形式是document.getElementById(),而这里明显是不行的。而且在浏览器端，无论是服务器控件的TextBox，还是HTML的<input type="text">等等，都将被统一解析。所以，最后没有实现。

     经过网上搜索，发现要实现对文本框的选取、赋值，有从服务器端和JS代码实现两种。而根据本题概况，倒应该用服务器端实现的方法。

 

服务器端实现：

   设置比较简单的环境：一个HTML文本框，两个服务器TextBox框。在其后有用JS实现的按钮，和用服务器端实现的按钮。设计图如下示：

 

这里对应的页面页面后台代码如下（即，Button的触发事件函数）：

   protected   void  Button1_Click( object  sender, EventArgs e)
    {
         // 选取form1中的全部控件，为简略，这里不能实现递归，只是实现单层选取
         foreach  (Control ct  in   this .FindControl ( " form1 " ).Controls )
        {
             if  (ct  is  TextBox )
                ((TextBox)ct).Text  =   string .Empty;
        }
        
    }

  这样在触发按钮事件后的结果如示：

  即实现了对服务器端的TextBox的选取、赋值效果。

 

JS代码实现：

    用JS代码实现，因为它是解析HTML代码的，所以它无法有效区分Html文本框和服务器端的TextBox所产生的相同代码，而是同时全部选取，并赋值。见JS代码：

< script type  = " text/javascript "  language  = " javascript "   >
     //  Description: 演示用JS实现的对文本框的全部选取、并赋值操作

      //  CopyRight: http://www.cnblogs.com/yangmingming

      //  Notes: 用最为简单的实现形式

     function  SetAtJS()
    {
     // 选取标记名为input 的所有元素 ，我也想到用getElementsByTagName，但不知如何取？！
       var  arrTextBox = document .getElementsByTagName ( " input " );
       for  ( var  i = 0 ;i < arrTextBox .length ;i ++ )
      {
           if (arrTextBox [i].type == " text " )
          {
              arrTextBox [i].value = "" ;
          }
      }
    }

 当启动引发JS函数的按钮时，所示结果如图：

 

 

 可见其将全部的文本框置为空了！

 

  综述之，通过上述简单的例子，进一步对服务器控件的选取、JS中元素的选取，进行了加深的学习。关于这方面，还要继续加强才是，因为太不熟。。