자바 스크립트 최소값과 최대 값

Question

텍스트 필드의 값을 제한하기 위해 다음을 사용했습니다. 그것은 사용자가 공백을 삭제하고 떠날려고 할 때 그것을 방치하지 않을 때만 효과가 있습니다. 최소값은 제거되지 않습니다. 수량 :

<input type="text" placeholder="none" name="notepad_and_pen" id="notepad_and_pen" maxlength="10" style="width:50px" tabindex=4 onchange="this.value = (this.value > 999999) ? 999999 : ((this.value < 400) ? 400 : this.value);"> 

나는 또한 어쩌면이 어떻게든지에 영향을 수 빈 텍스트 필드에 대한 자리 표시 자와 헤더에서이 스크립트가 :

$('input').focus(function(){ 
    $(this).val(''); 
}).blur(function(){ 
    if($(this).val() == "") 
    { 
     $(this).val($(this).attr('placeholder')) 
    } 
} 
); 

도움이 필요하세요. 나는 멍청한 놈이고 가르 칠 수있는 모든 것은 위대 할 것입니다. 모두에게 감사드립니다.

Answer 1

this.value의 값은 문자열입니다. 당신은 그것을 숫자와 비교하고 있습니다. 물론

parseFloat(this.value) 

, 그것은 그것을 디버깅에 훨씬 더 쉽게 만들고 인라인 이벤트 핸들러를 사용하지 않는 경우 작업 : 같은과 함께, 비교하기 전에 숫자로 변환합니다. 당신은 이미 jQuery를 사용하여, 그래서 이것을 시도하고 있습니다 :

$("#notepad_and_pen").on("change", function() { 
    var $this = $(this), 
     finalValue = $this.val(), 
     myValue = parseFloat(finalValue); 
    if (isNaN(myValue)) { 
     finalValue = ""; 
    } else { 
     if (myValue > 999999) { 
      finalValue = 999999; 
     } else if (myValue <= 0) { 
      finalValue = ""; 
     } else if (myValue < 400) { 
      finalValue = 400; 
     } 
    } 
    $this.val(finalValue); 
}); 

데모 : #notepad_and_pen에http://jsfiddle.net/wTKxX/4/

Answer 2

제한이 부과 될 수 있으며, 삭제 한 라이너, 허용했다.

This page은 자리 표시자가 기본적으로 지원되는지 여부를 감지하여 (따라서 Modernizr이 필요하지 않음) 감지 할 수있는 방법을 제공합니다.

및 this page은 자리 표시자를 넌 - 네이티브로 처리하는 합리적인 방법을 제공합니다. 당신이 원하는 작업

$(function() { 
    //Impose limits on #notepad_and_pen 
    $("#notepad_and_pen").on('change', function() { 
     this.value = (this.value === '') ? '' : Math.max(400, Math.min(999999, Number(this.value))); 
     //Use the following line to reject anything that's zero, blank or not a number, before applying the range limits. 
     //this.value = (!Number(this.value)) ? '' : Math.max(400, Math.min(999999, Number(this.value))); 
    }); 

    //With reference to http://diveintohtml5.info/detect.html 
    function supports_input_placeholder() { 
     var i = document.createElement('input'); 
     return 'placeholder' in i; 
    } 

    //With reference to http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 
    // 1. Handle placeholders (in non-HTML5 compliant browsers). 
    if(!supports_input_placeholder()) { 
     $('[placeholder]').focus(function() { 
      var input = $(this); 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
       input.removeClass('placeholder'); 
      } 
     }).blur(function() { 
      var input = $(this); 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.addClass('placeholder'); 
       input.val(input.attr('placeholder')); 
      } 
     }).blur(); 

     //2. Prevent placeholder values being submitted to form's action script 
     $('[placeholder]').eq(0).closest('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       var input = $(this); 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
       } 
      }); 
     }); 
    } 
});