2019년 9월 23일 월요일

python flask javascript에서 input에 영어,숫자만 입력 받기

사용자로 부터 ID를 입력 받을 때 영문과 숫자만 입력 값으로 허용하고 싶을 때 아래와 같이 하면 된다.

<form action="/seed" method="post">
    <label>ID: </label>
    <input id="input_id" name="id" type="text" onkeydown="javascript:return IsAlphaNumeric(event);" ondrop="javascript:return false;" style="ime-mode:disabled;"><br>
    <button class="btn btn-primary" type="submit">Logon</button>
</form>

<script type="text/javascript">
    function IsAlphaNumeric(ee) {
        var inputChar = String.fromCharCode(event.keyCode);
        var ret = false;
        if (event.keyCode == "16" || event.keyCode == "17" || event.keyCode == "37" || event.keyCode == "38" ||
            event.keyCode == "39" || event.keyCode == "40" || event.keyCode == "46") return true;
        if (inputChar == "" && inputChar == null) {
            ret = false;
        } else {
            if (inputChar.search(/[0-9a-zA-Z\b]/) >= 0) { ret = true; } else { ret = false; }
        }
        // error message
        if (!ret) {
            alert("Only english and number can be allowed to input. \n char:" + String.fromCharCode(event.keyCode) + ", keycode: " + event.keyCode);
            var input_txt = document.getElementById('input_id').value
            document.getElementById('input_id').value = input_txt
        }
        return ret;
    }
</script>

3번 라인에 'onkeydown' 에 주목하자. 만약 'onkeypress'를 사용한다면 한글 입력이 있을 때 이벤트가 발생하지 않아 한글 입력을 방지 할 수 없다.

3번 라인에 style="ime-mode:disabled;" 이 항목은 입력 칸에서 한/영 변환 키가 작동 안되게 하는 기능이지만 인터넷익스플로러에서는 잘 작동하나 크롬에서는 작동되지 않았다.

11,12 라인에서는 키보드키 중 shift, ctrl, 화살표 키, delete 입력에 대해서는 예외처리 해 준다.

16 라인에는 정규식으로 숫자와 영문자, 그리고 백스페이스에 대해서만 입력을 허용한다.