특정 문자만 입력 가능

때때로 우리는 사용자가 입력할 수 있는 문자에 대한 입력 상자에 대한 유효성 검사를 원합니다. 그리고 다른 문자는 입력 상자에 표시되지 않습니다.

Question: Make a input box that accepts digits and spaces only. Also, care for copy-paste (Ctrl +V ) of invalid characters.

첫 번째 단계는 입력 태그에 이벤트를 등록하는 것입니다. 그러나 이벤트 유형은 무엇입니까? 🤔 문자를 입력하고 있으므로keypress 이벤트가 괜찮아 보입니다.

<input type="text" id="input"/>

const input = document.getElementById('input');  
var currentInputValue = '';  
input.addEventListener('keypress', function inputKeypressHandler(e) {  
    // keypress event on input box is listened here and this function is triggered  
    // which key is pressed, keyPressed = e.which || e.keyCode;   
    const key = e.which || e.keyCode;  
    // key code corresponds to digits 0-9 or space then okay👍🏼  
    // 0-9 key code is 48-57  
    // space keycode is 32  
    const SPACE = 32; // May be just stored somewhere  
    const ZERO = 48;  
    const NINE = 57;  
    // valid digit is b/w 0-9 thus invalid will be lt 0 or gt 9  
    const isNotValidDigit = key < ZERO || key > NINE;  
    // if key is not a space or not a digit prevent this event  
    if (key != SPACE || ( isNotValidDigit ) ) {  
        e.preventDefault();  
    }  
});

이것은 꽤 좋은 해결책이지만 붙여넣기 치트를 막지는 못합니다. 이는 keypress 이벤트가 입력 상자 내부에서 누른 키만 기록하기 때문입니다. 더 나은 이벤트 유형이 필요합니다. input 복사 붙여넣기 및 드래그를 포함한 모든 입력 방식에서 실행됩니다.

var currentInputValue = '';  
input.addEventListener('input', function inputInputEventHandler(e) {  
    // use target of event to get value of input  
    const target = e.target;  
    // we can use regex to check if current input value  
    // is valid input  
    const DIGITS_SPACE_REGEX = /^[0-9\s]*$/;  
    // test if target.value or value of input box now is valid.  
    // if value is valid then update currentInputValue   
    // target.value else its is not value and we will  
    // ignore this target.value and replace it with   
    // previously valid value currentInputValue  
    DIGITS_SPACE_REGEX.test(target.value)   
        ? ( currentInputValue = target.value )   
        : ( target.value = currentInputValue );  
});

이렇게 하면 붙여넣기 문제가 해결되지만 여기에는 한 가지 문제가 있습니다. 무언가를 붙여넣는 경우Ctrl/Cmd + V 현재 커서 위치가 손실되고 시작 위치로 이동됩니다. 이런 일이 발생해서는 안 되며 커서 위치를 유지할 수 있어야 합니다.

// Track cursor position  
// cursor position is changed when you type something  
const cursorState = {};  
input.addEventListener('keydown', function inputKeydownHandler(e) {  
    const target = e.target;  
    // record the start and end  
    cursorState.selectionStart = target.selectionStart;  
    cursorState.selectionEnd = target.selectionEnd;  
});

지금 input 핸들러

// modify  
DIGITS_SPACE_REGEX.test(target.value)   
        ? ( currentInputValue = target.value )   
        : ( target.value = currentInputValue );  
 // to  
 if (DIGITS_SPACE_REGEX.test(target.value)) {  
     currentValue = target.value;  
 }  
 else {  
    target.value = current.value;  
    // restore cursor state  
    target.setSelectionRange(  
        cursorState.selectionStart,  
        cursorState.selectionEnd  
    );  
 }

Demo 👨‍💻