如何使用Javascript遍历页面上的所有文本框 [英] How to loop through all the textbox on page using Javascript

问题描述

我需要JavaScript代码的帮助。我想做的基本上是遍历页面中的所有Texbox。我想用户无法输入任何字符或特殊字符。我想允许其中的数字。

我有100个文本框，所以我想循环它们并停止输入char或spl char。

解决方案

以下代码将循环遍历页面上的所有 TextBoxes 。

  var  oInputs =  new   Array （）; 
 oInputs =  document  .getElementsByTagName（' 输入'） //  存储所有< input />的集合元素 
 
  for （i =  0 ; i< oInputs.length; i ++）
 {
  //  循环查找< input type = text/>  
  if （oInputs [i] .type == '  text'）
 {
  //  现在，oInputs [i]是一个TextBox。做你想做的事。 
} 
} 

更新

包括演示。



[演示]附加所有TextBox的KeyPress事件页面仅允许数字 [ ^ ]。

循环：

  var  aInputs =  document  .getElementsByTagName（  input）; 
 
  for （ var  i =  0 ; i< aInputs.length; i + =  1 ）
 {
  //  检查文本框属性 
  if （ / *   oType ==text* / ）
 {
 aInputs [i] [< span class =code-comment> / *   onchange * / ] = ValidateChangeFunction; 
 aInputs [i] [ / *   onkeydown * / ] = ValidateKeyPressFunction; 
 aInputs [i] [ / *  要验证的事件... * / ] = ValidateFunction ; 
} 
} 

验证（不确定你需要什么，所以我扔了整个对象我的旧js文件）：

  var  KeyCodes = 
 {
  //   /< summary>旨在处理各种密钥代码标识的对象。 < / summary>  
 
 IsSpecial： function （oEvent）{ return  oEvent.ctrlKey || oEvent.altKey; }，
 IsActionKey： function （oEvent）{ return  KeyCodes.IsEditKey（oEvent）|| KeyCodes.IsCtrlCommand（oEvent）; }，
 IsNumber： function （oEvent）{ return  KeyCodes.IsActionKey（oEvent）|| （（（oEvent.which> =  48 && oEvent.which< =  57 ） ||（oEvent.which> =  96 && oEvent.which< =  105 ） ）&& oEvent.shiftKey ==  false ）; }，
 IsDecimal： function （oEvent）{ return  KeyCodes.IsNumber（oEvent）|| （（oEvent.which == KeyCodes.PERIOD || oEvent.which == KeyCodes.NUMPAD_DECIMAL）&& oEvent.srcElement.value.indexOf（ 。）== -1）; }，
 
 IsEditKey： function （oEvent）
 {
  var  bIsEdit =  false ; 
 
  if （ this  .IsSpecial（oEvent））
 < span class =code-keyword> return   true ; 
 
  switch （oEvent.which）
 {
  case  此 .ENTER：
  case   this  .NUMPAD_ENTER：
  case   this  .BACKSPACE：
  case   this  .TAB：
  case  此 .PAGE_UP：
 案例 此 .PAGE_DOWN：
  case   this  .END：
  case   this  .HOME：
  case   this  .DELETE：
  case   this  .INSERT： 
  case  此 .LEFT：
  case   this  .RIGHT：
  case  此 .UP：
 案例 此 .DOWN：
 bIsEdit =  true ;  break ; 
 默认：
 bIsEdit =  false ; 
} 
 
  return  bIsEdit; 
}，
 
 IsCtrlCommand： function （oEvent）
 {
  var  bIsCtrlCommand =  false ; 
 
  if （oEvent.which ==  17 ） //   CTRL  
  return  真; 
  else   if （oEvent.ctrlKey）
 开关（oEvent.which）
 {
  case   65 ： //   a  
  case   67 ： //   c  
  case   70 ： //   f  
  case   83  ： //   s  
  case   86 ： //   v  
  case   88 ： //   x  
  case   90 ： //   z  
 bIsCtrlCommand =  true ;  break ; 
 默认：
 bIsCtrlCommand =  false ; 
} 
 
  return  bIsCtrlCommand; 
}，
 
显示： function （oKeyCode）{ return  oKeyCode？  String  .fromCharCode（oKeyCode）： ; }，
 ESCAPE： 27 ，
 ENTER： 13 ，
 NUMPAD_ENTER： 108 ，
 BACKSPACE： 8 ，
 DELETE：（IsKHTML（） ？ 127 ： 46 ），
 INSERT： 45 ，
 END： 35 ，
 HOME： 36 ， 
 PAGE_DOWN： 34 ，
 PAGE_UP： 33 ，
 SPACE：  32 ，
 TAB： 9 ，
 NUMPAD_DECIMAL： 110 ，
 PERIOD： 190 ，
 COMMA： 188 ，
 UP： 38 ，
 DOWN： 40 ，
 LEFT： 37 ，
 RIGHT： 39 ，
 NUMPAD_ADD： 107 ，
 NUMPAD_DIVIDE： 111 ， 
 NUMPAD_MULTIPLY： 106 ，
 NUMPAD_SUBTRACT： 109  
} 

I need help with JavaScript code.i want to do basically is to loop through all Texbox in the page. I want to user could not enter any Char or Special Char. I want to allow on numbers in them.
I have 100 text-boxes so i want to loop them and stop enter char or spl char.

解决方案

The following code would loop through all the TextBoxes on the Page.

var oInputs = new Array();
oInputs = document.getElementsByTagName( 'input' ) // store collection of all <input/> elements

for ( i = 0; i < oInputs.length; i++ )
{ 
    // loop through and find <input type="text"/>
    if ( oInputs[i].type == 'text' )
    {
        // Now here, oInputs[i] is a TextBox. Do whatever you want to do.
    }
}

Update

Including Demo.

[Demo] Attach KeyPress Event for all TextBoxes in the Page allowing numbers only[^].

Loop :

var aInputs = document.getElementsByTagName("input");

for (var i = 0; i < aInputs.length; i += 1)
{
   // check for textbox attribute
   if (/* oType == "text" */)
   {
      aInputs[i][/*onchange*/]  = ValidateChangeFunction;
      aInputs[i][/*onkeydown*/] = ValidateKeyPressFunction;
      aInputs[i][/*Event to validate...*/] = ValidateFunction;
   }
}

Validation (Not sure what all you need, so i threw in the whole object from an old js file of mine) :

var KeyCodes = 
   {
      /// <summary> Object designed to handle various key code identifications. </summary>

      IsSpecial   : function(oEvent) { return oEvent.ctrlKey || oEvent.altKey; },
      IsActionKey : function(oEvent) { return KeyCodes.IsEditKey(oEvent) || KeyCodes.IsCtrlCommand(oEvent); },
      IsNumber    : function(oEvent) { return KeyCodes.IsActionKey(oEvent)  || (((oEvent.which >= 48 && oEvent.which <= 57) || (oEvent.which >= 96 && oEvent.which <= 105)) && oEvent.shiftKey == false); },      
      IsDecimal   : function(oEvent) { return KeyCodes.IsNumber(oEvent)  || ((oEvent.which == KeyCodes.PERIOD || oEvent.which == KeyCodes.NUMPAD_DECIMAL) && oEvent.srcElement.value.indexOf(".") == -1); },

      IsEditKey : function(oEvent) 
      { 
         var bIsEdit = false;
         
         if (this.IsSpecial(oEvent))
            return true;

         switch (oEvent.which)
         {
            case this.ENTER :
            case this.NUMPAD_ENTER :
            case this.BACKSPACE :
            case this.TAB :
            case this.PAGE_UP :
            case this.PAGE_DOWN :
            case this.END :
            case this.HOME :
            case this.DELETE :
            case this.INSERT :
            case this.LEFT :
            case this.RIGHT :
            case this.UP :
            case this.DOWN :
               bIsEdit = true; break;
            default :
               bIsEdit = false;
         }

         return bIsEdit;
      },

      IsCtrlCommand : function(oEvent) 
      { 
         var bIsCtrlCommand = false;

         if (oEvent.which == 17) // CTRL
            return true;
         else if (oEvent.ctrlKey)
            switch (oEvent.which)
            {
               case 65: // a
               case 67: // c
               case 70: // f
               case 83: // s
               case 86: // v
               case 88: // x
               case 90: // z
                  bIsCtrlCommand = true; break;
               default : 
                  bIsCtrlCommand = false; 
            }
         
         return bIsCtrlCommand;
      },

      Display           : function(oKeyCode) { return oKeyCode ? String.fromCharCode(oKeyCode) : ""; },
      ESCAPE            : 27,
      ENTER             : 13,
      NUMPAD_ENTER      : 108,
      BACKSPACE         : 8,
      DELETE            : (IsKHTML() ? 127 : 46),
      INSERT            : 45,
      END               : 35,
      HOME              : 36,
      PAGE_DOWN         : 34,
      PAGE_UP           : 33,
      SPACE             : 32,
      TAB               : 9,
      NUMPAD_DECIMAL    : 110,
      PERIOD            : 190,
      COMMA             : 188,
      UP                : 38,
      DOWN              : 40,
      LEFT              : 37,
      RIGHT             : 39,
      NUMPAD_ADD        : 107,
      NUMPAD_DIVIDE     : 111,
      NUMPAD_MULTIPLY   : 106,
      NUMPAD_SUBTRACT   : 109
   }

这篇关于如何使用Javascript遍历页面上的所有文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！