유효하지 않은 경우에도 HTML5 숫자 입력 필드에서 원시 입력을 검색하는 방법은 무엇입니까?

HTML5 숫자 입력에서 원시 입력 검색

HTML5에서 요소를 사용하면 사용자가 숫자 값을 입력할 수 있습니다. 그러나 입력이 유효하지 않은 경우(예: 숫자가 아닌 문자 포함) 해당 값 속성은 빈 문자열을 반환합니다.

문제:

어떻게 검색할 수 있나요? 필드에 잘못된 텍스트가 포함되어 있습니까?

해결 방법:

사양에서는 잘못된 값 검색을 방지하지만 입력이 비어 있거나 잘못된 값이 포함되어 있는지 확인할 방법이 없습니다. 텍스트. 따라서 다른 접근 방식이 필요합니다.

대체 접근 방식:

값 속성에 의존하는 대신 입력 요소에 대한 이벤트 리스너를 사용하여

코드 예:

const numberInput = document.getElementById('edQuantity');

numberInput.addEventListener('input', (event) => {
  const rawValue = event.target.value;

  if (isNaN(rawValue)) {
    // Input is invalid text; color it red
    numberInput.classList.add('error');
  } else {
    // Input is a valid number; color it green
    numberInput.classList.remove('error');
  }
});

이 스크립트는 이벤트 리스너를 입력값이 변경될 때마다 이를 캡처하는 요소입니다. 그런 다음 값이 유효한 숫자인지 확인합니다. 그렇지 않은 경우 입력을 빨간색으로 표시합니다. 그렇지 않으면 녹색으로 표시됩니다.

참고:

이 접근 방식을 사용하면 잘못된 텍스트를 포함한 원시 입력을 얻을 수 있지만 잘못된 입력의 유효성 검사 및 처리는 다음과 같습니다. 당신에게 달렸습니다.

위 내용은 유효하지 않은 경우에도 HTML5 숫자 입력 필드에서 원시 입력을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!