필드에 유효하지 않은 문자 입력 방지: 종합 가이드

Question

Onkeydown에서는 다음 JavaScript를 실행합니다.

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-s]/ig, '') : 없는;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-s ]/ig, '') : null;
   }
}

세 가지 제목 속성 중 하나가 페이지의 각 입력 필드에 할당됩니다. 유효하지 않은 문자를 올바르게 제거하면 코드가 작동하지만 다음 문자를 입력할 때까지는 작동하지 않습니다. 잘못된 입력을 단순히 거부하는 방법을 찾고 싶습니다. 당신의 도움을 주셔서 감사합니다!

편집: 저는 전 세계적으로 이벤트를 만듭니다. 제가 한 일은 다음과 같습니다.

함수 세계화() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, 입력[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, 입력[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, 입력[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, 입력[i]);
      }
  }

globalization()runbody.onload

따라서 일반적인 입력 필드에는 HTML이 있으며 다음과 같은 함수 호출은 없습니다.

<input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/> ;

Answer 1

위의 코드는 이를 보여줍니다. 숫자만 허용됩니다. 예를 들어 BACKSPACE와 같은 예외를 추가하여 수정할 수 있습니다

으아악

Answer 2

애초에 설정되는 것을 방지하려면 keydown 이벤트 핸들러에서 false를 반환하여 이벤트가 더 이상 전파되는 것을 방지할 수 있습니다.

아래 예제는 jQuery를 사용하여 작성했지만 기존 바인딩에서도 동일한 기능을 사용할 수 있습니다.

서버 측 검증도 중요하지만 사용자 친화성을 위해서는 클라이언트 측 검증도 중요합니다.

으아악