input text용 updown 버튼

//============================================================================
// input text용 updown 버튼
//============================================================================
function input_print_updown(this_s,v_min,v_max,step){
 //==========================
 // 초기화
 //==========================  
 if(this_s.type!='text'){return;}
 this_s.value = parseFloat(this_s.value);
 if(!isFinite(step))step=1;
 if(isFinite(v_max) && this_s.value>=v_max){this_s.value=v_max;}
 if(isFinite(v_min) && this_s.value<=v_min){this_s.value=v_min;}
 //==========================
 // SPAN에 출력후 textbox를 속에 넣는다
 //========================== if(!step) step=1;
 var span = document.createElement('span');
 //span.style.borderStyle='solid';
 if (this_s.nextSibling)
 this_s.parentNode.insertBefore(span,this_s.nextSibling);
 else this_s.parentNode.appendChild(span);
 
 span.appendChild(this_s);
 //==========================
 // 버튼 생성부
 //========================== 
 var input_m = document.createElement('input');
 input_m.type='button';
 input_m.value='-';
 input_m.className = this_s.className;
 input_m.style.fontSize = this_s.style.fontSize;
 input_p = input_m.cloneNode(input_m);
 input_p.value='+';
 //==========================
 // 버튼 이벤트 생성부
 //==========================
 to =null;
 var to_clear = function(){ clearTimeout(to); }//타임아웃 클리어
 var m = function(){
  var t = parseFloat(this_s.value);
  if(isFinite(v_min) && t<=v_min){to_clear();return;}
  this_s.value=t-step;
 }
 var m_d = function(){
  m();to = setTimeout(m_d,200);
 } 
 var p = function(){
  var t = parseFloat(this_s.value);
  if(isFinite(v_max) && t>=v_max){to_clear();return;}
  this_s.value=t+step;
 }
 var p_d = function(){
  p();to = setTimeout(p_d,200);
 }
 input_m.onmousedown = m_d;
 input_m.onmouseout = to_clear;
 input_m.onmouseup = to_clear;
 input_p.onmousedown = p_d;
 input_p.onmouseout = to_clear;
 input_p.onmouseup = to_clear;
 //==========================
 // 버튼을 붙인다.
 //========================== 
 span.appendChild(input_m);
 span.appendChild(input_p); 
}



<input name="test" type="text" id="test" value="20" size="5" maxlength="5" />
<script>input_print_updown(document.getElementById('test'),0,50);</script>


예전 버전도 있는데.. 삽질이 심해서... 간단하게.

 


댓글
  • 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.14
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