jQuery를 사용하여 숫자와 소수점만 입력할 수 있는 입력창 구현

jQuery 입력 상자를 구현하여 숫자 및 소수점 입력을 제한합니다

웹 개발을 하다 보면 숫자 및 소수점 입력을 제한하는 등 사용자가 입력 상자에 입력하는 내용을 제어해야 하는 경우가 종종 있습니다. . 이 제한은 JavaScript 및 jQuery를 통해 달성할 수 있습니다. 다음은 jQuery를 사용하여 입력창에 숫자 및 소수점 입력을 제한하는 기능을 구현하는 방법을 소개합니다.

1. HTML 구조

먼저 HTML로 입력 상자를 만들어야 합니다. 코드는 다음과 같습니다.

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

여기서는 ID가 "inputNumber"인 입력 상자를 만들고 자리 표시자 속성을 "숫자만"으로 설정합니다. 및 소수점 입력 가능'을 선택하여 숫자와 소수점만 입력하도록 합니다.

2. jQuery는 입력 제한 기능을 구현합니다

다음으로 jQuery를 사용하여 입력 제한 기능을 구현합니다. 코드는 다음과 같습니다.

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

위 코드에서 먼저 $(document).ready()函数来确保DOM加载完毕后再执行jQuery代码。然后通过keypress()函数来监听输入框的键盘按下事件。在事件处理函数中，通过event.which或event.keyCode를 사용하여 키의 ASCII 코드를 가져온 다음 입력이 숫자인지 소수점인지 확인하고, 그렇지 않은 경우 기본 이벤트를 방지합니다.

소수점 상황을 처리하려면 입력 상자에 이미 소수점이 있는 경우 소수점을 다시 입력하거나 입력 상자 시작 부분에 소수점 입력을 방지해야 합니다.

3. Test

마지막으로 코드를 테스트해 보겠습니다. 위 코드가 포함된 HTML 페이지를 브라우저에서 열고 숫자와 소수점만 입력할 수 있도록 입력 상자에 다른 문자를 입력해 보세요.

이 작업을 통해 jQuery를 사용하여 입력 상자를 숫자와 소수점만으로 제한할 수 있습니다. 이는 사용자가 사양을 입력하고 사용자 경험을 향상시키는 데 효과적으로 도움이 될 수 있습니다. 위 내용이 해당 기능을 구현하는 데 도움이 되기를 바랍니다.

위 내용은 jQuery를 사용하여 숫자와 소수점만 입력할 수 있는 입력창 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!