选取页面全部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中元素的选取，进行了加深的学习。关于这方面，还要继续加强才是，因为太不熟。。