javascript form 폼 조작

input, textarea

input.value / textarea.value / input.checked

*textarea.innerHTML은 사용하지 마세요 - 처음 열 당시의 HTML만 저장되어 최신 값을 구할 수 없습니다.

 

select, option

<select id="select">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
  <option value="banana">Banana</option>
</select>

<script>
  // 세 가지 코드의 실행 결과는 모두 같습니다.
  select.options[2].selected = true;
  select.selectedIndex = 2;
  select.value = 'banana';
</script>

👉🏻 select 에 Banana가 기본으로 선택되어있음.

 

onfocus, onblur : 두 이벤트는 버블링되지 않고 input 필드에서만 트리거 된다.

input에 focus 시 form에 변화를 주고 싶다면 onfocus가 아닌 focusin/focusout을 사용해야한다.

<style>
  .invalid { border-color: red; }
  #error { color: red }
</style>

이메일: <input type="email" id="input">

<div id="error"></div>

<script>
input.onblur = function() {
  if (!input.value.includes('@')) { // @ 유무를 이용해 유효한 이메일 주소가 아닌지 체크
    input.classList.add('invalid');
    error.innerHTML = '올바른 이메일 주소를 입력하세요.'
  }
};

input.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};
</script>

*onblur 대상으로부터 벗어났을 때 해당되었던 대상에서 일어나는 이벤트

 

input 이벤트(수정이 일어날 때마다 이벤트를 실행하고 싶을 때 적절하다.) / change와 다르게 즉시 실행됨

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>