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;}