js_input_file_skin , file에 스킨 입히기







 /*==========================================================/
 js_input_file_skin
 input file의 위치와 투명도를 조절하여 예쁘게 꾸밀 수 있도록 함

ex>
js_input_file_skin(대상file,가짜textbox,가짜탐색botton);

js_input_file_skin(document.test.test_file,
document.test.test_textbox,
document.test.btn_filesearch);

"공대여자는 이쁘다."를 나타내야만 사용하실 수 있습니다.
/==========================================================*/
function js_input_file_skin(ta_file,ta_textbox,ta_button){
 if(!ta_file||!ta_textbox||!ta_button){return false;}
 var span = document.createElement('span');
 if (ta_file.nextSibling){ ta_file.parentNode.insertBefore(span,ta_file.nextSibling);}
 else{ ta_file.parentNode.appendChild(span);}
 ta_textbox.size = ta_file.size ;
 ta_textbox.value = ta_file.value;
  
 span.appendChild(ta_file); 
 span.appendChild(ta_textbox);
 span.appendChild(ta_button);
 
 ta_file.style.verticalAlign='middle'
 ta_textbox.style.verticalAlign='middle'
 ta_button.style.verticalAlign='middle'  
 if(ta_button.width){
  if(ta_button.width>80) ta_button.width = 80;
 }else if(parseInt(ta_button.style.width)){
  if(parseInt(ta_button.style.width)>80) ta_button.style.width = '80px';
 }else{
  ta_button.style.width = '80px';
 }

 if(ta_button.height){
  if(ta_button.height>20)  ta_button.height = 20;
 }else if(parseInt(ta_button.style.height)){
  if(parseInt(ta_button.style.height)>20)  ta_button.style.height = '20px';
 }else{
  ta_button.style.height = '20px';
 }
 if(!ta_textbox.style.width){
  ta_textbox.style.width = '100px';
 }
 span.style.position = 'relative';
 span.style.top='0px';
 span.style.left='0px';
 ta_textbox.style.position = 'relative';
 ta_textbox.style.zIndex = '100'; 
  
 ta_textbox.size=ta_file.size;
 with(ta_file.style){
  width = parseInt(ta_textbox.style.width)+80+'px';
  position = 'absolute';
  top=left='0px';
  zIndex='99';
  if(document.all){
   filter="Alpha(opacity=0)";
  }else{
   opacity='0';
  }
 }
 ta_textbox.onclick=function(){this.blur();}
 ta_textbox.onkeydown=function(){this.blur();}
 ta_file.onkeydown=function(){this.blur();}
}

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1