키보드 이벤트 / e.key / regex 사용 - match / HTML속성 pattern, required / readonly

[ Event 종류 ]
마우스 : click / dbclick / mousover / mouseout 

키보드 : keydown누른다 / keypress누른상태 /  keyup손을뗀다
=> 한글자 입력하는데 이 3가지 이벤트가 발생하는것으로 구분해두고, 
각각에 이벤트 걸 수 있다.

submit : <input type="submit" > 애는 따로 submit 이벤트라고 부른다. 

포커스 :  focus(버튼등에 외곽선으로 표시)

 

document.querySelector("textarea").focus( );

- textarea 태그에 focus 이벤트를 걸어두면, 실행됬을 때

해당 영역 외곽선 표시  +  바로 입력할 수 있는 focus상태로 만들어줌.  

( 다시입력 버튼을 누르면 => 커서위치를 textarea 로 자동으로 보내줘서 사용자 입장에서 바로 입력 가능 ) 

blur 

 

 

[ 키보드 이벤트 ] 

- 이벤트객체 e 에 있는 key / keyCode 기능 유용하게 사용! 

 

e.keyCode =>  입력한 키의 aski 코드
e.key => 입력한 키 자체 반환 

 

1. keyCode 이용 

 <input type="text" id="phone" name="phone" >

  <div id="output">입력내용</div>

document.querySelector("#phone").addEventListener('keydown',
function(e){
if(e.keyCode >=48 && e.keyCode<=57){
document.querySelector("#output").innerHTML
= (e.key) + " = 적합 ";
document.querySelector("#output").style.color = "green";
}else{
document.querySelector("#output").innerHTML
= (e.key) + " = 부적합 ";
document.querySelector("#output").style.color = "red";
}

 

- keydown 이벤트가 일어나면 함수 실행 

- 입력된 값이 이벤트객체 e 에 담기고,

e.keyCode  => 입력값의 keyCode, 아스키코드가 48~57 = 숫자 0~9 이면 으로 조건을 걸어서 사용할 수 있다. 

e.key  => 실제 입력값을 보여줌 

 

- JS 에서는 이벤트에 따라서 CSS 도 걸어줘서 동적인 HTML 을 만들 수 있다. 

 

2. 이벤트에 count 걸어서 이용하기 

let count = 0;
    document.querySelector("#phone").addEventListener('keydown',
    function(e){
    count++;
    if(count == 11 && 
    document.querySelector("#phone").value.indexOf("010") == 0 ){}

 

- 전역변수로 count 변수 하나 만들어두고, 

"keydown" 이벤트에 count++ 걸어두면 => keydown이 될때마다 카운트가 된다. 

이 변수를 조건으로 걸어서 이용할 수 있다. 

 

 

 
3.  regex 이용하기 ( match ) 
- regex 로 패턴 정해놓고 
match 

=> 맞으면 해당값 반환 
=> 안맞으면 null 반환  

 

if ( match  != null ) else 로 조건을 걸어 사용할 수 있다. 

 

- regex 설정법 

/ / 안에 작성 

^시작  regex  끝$

let regex = /^010[0-9]{3,4}[0-9]{4}$/;

let phone = document.querySelector("#phone").value;
    if(phone.match(regex) != null ){ } 
      else {   }

=> 사용자의 입력값 phone을  설정해둔 regex 패턴과  match 해봤더니 

null 이 아니라면 == 리턴값이 있다면 == regex 패턴에 통과 했다면 { 로직 } 실행 

 else { "패턴에 일치하지 않습니다"; } 

 

 

1. 이렇게 직접 JS 에서 regex 패턴을 설정하고 이용해 로직을 만들 수 있고 ,

 

2.  HTML 태그 pattern 속성으로 추가 하는 방법도 있다. 

폰번호 : <input type="text" id="phone" name="phone" pattern="010[0-9]{3,4}[0-9]{4}">

input 태그에 이렇게 pattern 속성으로 regex 를 설정해두면 

=> 패턴에 안맞는 입력값이 들어오면

=> "요청한 형식과 일치시키세요" 메세지 주고, 제출 안되게 해준다. 
( HTML pattern 속성 기능 )

 

- 편하긴 엄청 편한데, 입력값에 따라 반응할 이벤트를 

저 기본 HTML 툴팁을 사용하는 것이 충분하지 않고, 

추가로 로직을 설정해서 

"id 는 영문으로만 생성 가능합니다." 

 "특수문자는 사용할 수 없습니다." 

같은 이벤트들을 만들어서 걸어두고 싶으면, 1번 방법으로 직접 regex 를 설정하고 

로직을 짜서 만들면 된다.

 

 

저런 HTML 의 pattern 속성과 같이, 짧은 속성 하나로

꽤나 모범적인? 이벤트를 만들어둔 것들도 상황에 따라 적절하게 사용한다면 좋을 것 같다. 

 

 <  required   HTML속성> 

 

<input type="text" id="id" name="id" required >

input 태그등에 required 속성을 걸어두면, 

그 입력란에 사용자가 입력값을 주지않고 제출하려하면 

툴팁 :  " 이입력란을 작성하세요 " 메세지를 주고, 실행되지 않게 함 

 

<  readonly   HTML 속성 >  : 읽기전용

 

- 처음부터 태그를 읽기전용으로 만들고 싶으면, 바로 속성으로 넣어두면 되고 

if(remain_len==0){
textarea.setAttribute("readonly", "readonly");
h2_msg.innerHTML = "더이상 입력 불가능합니다."
h2_msg.style.color = "red"; }

 

이런식으로 조건을 걸어놓고, ( 입력할 수 있는 길이가 0 이되면 )

JS에서 속성을 set 할수 있는 setAttribute 를 이용해서 readonly 를 걸어두면 

조건에 따라, 동적으로 readonly 로 바뀌는 식으로 사용할 수 있다.