input 태그에 숫자와 소숫점만 들어가게 제어 하는 방법

HTML5에서는 input 요소에 type 속성을 사용하여 입력 가능한 데이터의 유형을 제한할 수 있습니다. 숫자와 소수점만 입력할 수 있도록하려면 type="number"를 사용하면 됩니다. 그러나 이 방법은 일부 브라우저에서 정확히 작동하지 않을 수 있습니다.

더욱 정확한 제어를 위해서는 JavaScript를 사용하여 입력된 값을 검증하는 방법을 사용할 수 있습니다. 예를 들어, input 요소에서 발생하는 keypress 이벤트를 사용하여 숫자와 소수점 이외의 문자를 막을 수 있습니다. 아래는 jQuery를 사용하여 이를 구현한 예시입니다.

<input type="text" id="number-input">

$(document).ready(function() {
  $('#number-input').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      // 소수점(.)이 두 번 이상 입력되지 않도록 막음
      var inputValue = $(this).val();
      if (charCode == 46 && inputValue.indexOf('.') != -1) {
        event.preventDefault();
      }
    }
  });
});

이 코드는 input 요소에서 keypress 이벤트가 발생할 때마다 입력된 문자의 유형을 검사합니다. 숫자와 소수점 이외의 문자가 입력되면 이를 막으며, 소수점(.)이 이미 입력되었을 경우 더 이상 입력되지 않도록 합니다. 이 코드를 사용하면 input 요소에서 숫자와 소수점만 입력되도록 제한할 수 있습니다.