文件標籤分割效果



 <input type="text" id="form7" disabled="disabled" style=" padding-left:2px;width:90%; margin:10px 0 0 20px; height:20px" onblur="file(),label_show()" onfocus="label_hide()" />

 <div id="div_file" style="position:absolute; top:14px; left:23px" onclick="set_status();">
 </div>


//file文件名分割效果
function file()
{
    var textarea=document.getElementById("form7");
    var value=textarea.value;
var div_span=document.getElementById("div_file");    
var select_n;
var objs=document.getElementsByName("select_radio");
 for(var i=0;i<objs.length;i++)   
{   
 if(objs[i].checked)   
 {   
  if(objs[i].value=="Single File")   
 {   
  select_n=1;   
 }   
 if(objs[i].value=="Multiple Files")   
  {   
  select_n=4;   
  }  
 } 
}                                                       //讀取但選值,是一個文件or四個文件
 var spanlen =document.getElementById("div_file").getElementsByTagName("span").length;  //獲得div_file內span個數
if(select_n==1)
  { 
      if(spanlen<1&&value!=" ")
    var text_array=value.split(",",1);
  else
  var text_array=value.split(",",0)
  }
else
  {
     if(spanlen<4&&value!=" ")
     var text_array=value.split(",",(4-spanlen));
 else
  var text_array=value.split(",",0)
  }
//  var num=text_array.length;  
 
      for(var i=0;i<text_array.length;i++)
 {
  if(text_array[0]!="")
  {
  var span=document.createElement("span");
 // if(num==1)
//   span.id="span_"+spanlen;
//   else
  span.id="span_"+(i+spanlen);
  span.innerHTML=text_array[i];
  div_span.appendChild(span);
  }
 }
                                     //根據單選情況選擇相應文件個數
 
//var width=document.getElementById("div_file").width;
// document.getElementById("text_file").style.paddingLeft=width;


         var width=$("#div_file").width();          //獲取元素寬度  
 
$("#form7").css("padding-left",width);
 textarea.value=""; 
}


//laber提示文字顯示與隱藏
function label_hide()
{
document.getElementById("label_file").style.display="none";
}
function label_show()
{
document.getElementById("label_file").style.display="block";
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章