JavaScript는 입력을 금지합니다-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

JavaScript는 입력을 금지합니다

王林

May 12, 2023 am 10:16 AM

JavaScript 입력 금지

인터넷의 지속적인 발전과 함께 JavaScript는 현대 웹 디자인에서 없어서는 안 될 부분이 되었습니다. JavaScript는 웹페이지의 상호작용성을 향상시키고 사용자가 데이터를 더 쉽게 입력하고 조작할 수 있도록 해줍니다. 그러나 어떤 경우에는 JavaScript를 통한 사용자 입력을 제한하는 일부 기능을 구현해야 합니다. 예를 들어 사용자가 특정 문자를 입력하는 것을 금지하거나 사용자가 입력할 수 있는 문자 수를 제한하는 등의 작업을 수행합니다. 이 기사에서는 몇 가지 JavaScript 기술을 설명하여 이러한 기능을 구현하는 데 도움을 줄 것입니다.

특정 문자 입력 비활성화

사용자 입력 상자에 특정 문자 입력을 금지하려면 JavaScript 정규 표현식을 통해 이를 수행할 수 있습니다. 예를 들어, 사용자가 숫자만 입력하도록 하려면 사용자 입력 상자의 onkeypress 이벤트에 다음 코드를 사용하면 됩니다.

function checkNumber(event) {
  var charCode = event.keyCode;
  if (charCode < 48 || charCode > 57) {
    event.preventDefault();
  }
}

로그인 후 복사

이 코드에서는 먼저 사용자가 입력한 문자의 ASCII 코드를 구하고, 그런 다음 문자인지 숫자인지 확인합니다. 숫자가 아닌 경우 event.preventDefault() 메서드가 호출되어 기본 문자 입력 이벤트를 방지합니다.

마찬가지로 사용자가 다른 특정 문자를 입력하는 것을 금지하려면 판단 조건을 수정하면 됩니다. 예를 들어 사용자가 문자나 구두점을 입력하지 못하게 하고 싶다면 다음 코드를 사용하면 됩니다.

function checkCharacter(event) {
  var charCode = event.keyCode;
  if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || (charCode >= 33 && charCode <= 47) || (charCode >= 58 && charCode <= 64) || (charCode >= 91 && charCode <= 96) || (charCode >= 123 && charCode <= 126)) {
    event.preventDefault();
  }
}

로그인 후 복사

이 코드에서는 문자가 문자인지 구두점인지 판단하도록 판단 조건을 수정합니다.

공백은 허용되지 않습니다

때로는 사용자가 데이터를 입력할 때 공백을 입력할 수 없기를 원합니다. 이는 사용자가 입력한 문자가 공백인지 여부를 감지하여 달성할 수 있습니다. 예를 들어, 사용자 입력 상자의 onkeypress 이벤트에 다음 코드를 사용할 수 있습니다.

function checkWhiteSpace(event) {
  var charCode = event.keyCode;
  if (charCode === 32) {
    event.preventDefault();
  }
}

로그인 후 복사

이 코드에서는 사용자가 입력한 문자가 공백인지 확인하고 공백이면 event.preventDefault() 메서드를 호출합니다. 기본 문자를 방지하려면 이벤트를 입력하세요.

지정된 문자 수를 초과하는 입력을 금지합니다

사용자가 입력 상자에 입력하는 문자 수를 제한하려면 사용자 입력 상자의 문자 수를 감지하여 이를 수행할 수 있습니다. 예를 들어 사용자 입력 상자의 oninput 이벤트에 다음 코드를 사용할 수 있습니다.

function limitInput(event, maxLength) {
  var input = event.target.value;
  if (input.length > maxLength) {
    event.target.value = input.slice(0, maxLength);
  }
}

로그인 후 복사

이 코드에서는 먼저 사용자 입력 상자의 값을 가져와서 문자 수가 지정된 최대 문자 수를 초과하는지 여부를 확인합니다. (최대 길이). 이를 초과하면 첫 번째 maxLength 문자가 가로채어 입력 상자에 다시 기록됩니다.

전체 예

다음은 JavaScript를 사용하여 특정 문자 입력 금지, 공백 입력 금지, 지정된 수 이상의 문자 입력 금지와 같은 기능을 구현하는 방법을 보여주는 전체 예입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 禁止输入</title>
</head>
<body>
  <form>
    <label>只能输入数字：</label>
    <input type="text" onkeypress="checkNumber(event)">
    <br><br>
    <label>不能输入空格：</label>
    <input type="text" onkeypress="checkWhiteSpace(event)">
    <br><br>
    <label>最多只能输入 5 个字符：</label>
    <input type="text" oninput="limitInput(event, 5)">
  </form>

  <script>
    function checkNumber(event) {
      var charCode = event.keyCode;
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    }

    function checkWhiteSpace(event) {
      var charCode = event.keyCode;
      if (charCode === 32) {
        event.preventDefault();
      }
    }

    function limitInput(event, maxLength) {
      var input = event.target.value;
      if (input.length > maxLength) {
        event.target.value = input.slice(0, maxLength);
      }
    }
  </script>
</body>
</html>

로그인 후 복사

이 예에서는 숫자 입력 금지, 공백 입력 금지, 지정된 수 이상의 문자 입력 금지 기능을 보여주는 데 사용되는 세 개의 입력 상자가 있는 양식을 만듭니다. 각 입력 상자는 해당 JavaScript 이벤트 핸들러에 바인딩됩니다.

결론

JavaScript를 사용하면 사용자 입력을 제한하는 다양한 기능을 쉽게 구현할 수 있습니다. 이는 웹사이트의 보안과 데이터 품질을 향상시킬 뿐만 아니라 사용자에게 더 나은 대화형 경험을 제공합니다. 이 기사가 JavaScript를 사용하여 웹 디자인을 더 잘 구현하는 데 도움이 되기를 바랍니다.

위 내용은 JavaScript는 입력을 금지합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.