js 将input、textarea、Select等控件替换成标签(span)

代码

function  RemoveControl(elements)
 {
   var  arrObj  =   new  Array();
  
   var  count  =  elements.length;
   for ( var  i = 0 ;i < count;i ++ )
  {
    if (elements[i]  ==  undefined)
     continue ;
    
    var  obj  =  document.createElement( ' span ' );
    switch (elements[i].type)
   {
     case   " text "  : 

      obj.style.width=elements[i].style.width;
      obj.className="word_warpbreak";
      obj.setAttribute( " innerHTML " ,elements[i].value);
       break ;
     case   " textarea "  :

      obj.style.width=elements[i].style.width;
      obj.className="word_warpbreak";
      obj.setAttribute( " innerHTML " ,elements[i].innerHTML);
      elements[i].innerHTML  =   '' ;
       break ;
     case   " select "  :
       for ( var  j = 0 ;j < elements[i].length;j ++ )
      {
        if (elements[i][j].selected)
       {

        obj.style.width=elements[i].style.width;
        obj.className="word_warpbreak";
        obj.setAttribute( " innerHTML " ,elements[i][j].text);
         break ;
       }
      }
      elements[i].options.length  =   0 ;
       break ;      
   }
   elements[i].parentNode.appendChild(obj);
   arrObj[arrObj.length]  =  elements[i];
  }
  
   // 删除表单原控件
   for ( var  i = 0 ;i < arrObj.length;i ++ )
  {
   arrObj[i].removeNode();
  }
 }

1、上面是替换原有控件的方法

2、调用上面的方法

代码

// input控件
var  elements  =  document.getElementById( ' tab_Forms ' ).getElementsByTagName( ' input ' );
RemoveControl(elements);

// textarea控件
elements  =  document.getElementById( ' tab_Forms ' ).getElementsByTagName( ' textarea ' );
RemoveControl(elements); 
  
// select 控件
elements  =  document.getElementById( ' tab_Forms ' ).getElementsByTagName( ' select ' );
RemoveControl(elements);    

 

 

//3.设置span以下样式则可以自动换行（折行）

.word_warpbreak{ word-warp: break-word; word-break: break-all; clear: both; float: left;}

 

转载于:https://www.cnblogs.com/hnczliaoxueping/archive/2010/08/06/1793649.html