[javascript] 인풋(input) 속성 제어 및 메서드

input 속성 제어

input 관련 속성

• input의 속성을 조회/설정 가능

// [문법 - 조회]
해당input.value 

// [문법 - 설정]
해당input.value = "변경하려는 값"

 

속성명	설명	예
value	현재 입력된 값을 읽거나 설정	input.value = "Hello"
type	인풋 타입 변경 (text, password 등)	input.type = "password"
checked	checkbox, radio가 체크되었는지 확인	checkbox.checked = true
disabled	비활성화 여부	input.disabled = true
readOnly	읽기 전용 여부	input.readOnly = true
placeholder	힌트 텍스트 설정	input.placeholder = "이름 입력"
maxLength	최대 글자 수 제한	input.maxLength = 10
required	필수 입력 여부	input.required = true

---

input 관련 메서드

focus()

• input 요소에 포커스를 줍
• 커서가 input에 자동으로 깜빡임
• 언제 사용?
  • 페이지 로드시 특정 필드에 자동 포커스를 줄 때
  • 사용자가 오류 입력했을 때 해당 필드로 다시 유도할 때

// [문법]
해당input.focus()

---

blur()

• input 요소에 포커스를 제거
• 커서가 사라지며, 포커스 해제
• 언제 사용?
  
  • 사용자가 다른 작업을 하게 하거나,
  • 포커스를 강제로 옮겨야 할 때

// [문법]
해당input.blur()

---

select()

• input 안의 텍스트를 모두 선택
• 사용자가 마우스로 드래그한 것처럼 전체 선택
• 텍스트 전체 블록 지정
• 언제 사용?
  
  • 사용자에게 복사하도록 유도할 때
  • 입력 값을 빠르게 바꾸게 하고 싶을 때

// [문법]
해당input.select()

---

click()

• 해당 input 요소의 클릭 이벤트를 강제로 발생
• 언제 사용?
  • 사용자가 버튼을 눌렀을 때 특정 input을 대신 클릭시킬 때
  • <input type="file">을 클릭시켜 파일 업로드 유도

// [문법]
해당input.click()

---

checkValidity()

• input의 유효성 조건(required, type, minlength 등)을 검사
  → true/false 반환
• 언제 사용?
  • 폼을 제출하기 전에 자바스크립트로 사전 점검할 때

// [문법]
해당input.checkValidity()

const input = document.getElementById('email');
if (!input.checkValidity()) {
  console.log("유효하지 않음");
}

---

setCustomValidity(message)

• 기본 유효성 검사 메시지를 개인화된 메시지로 설정
• 무조건 메시지를 등록하는 순간부터 오류 상태로 간주
  따라서 반드시 빈문자열로 오류 메시지를 초기화 해주어야 함
• 언제 사용?
  • 기본 메시지가 마음에 들지 않을 때
  • 맞춤형 안내 문구를 보여주고 싶을 때
    ✅ 이후 input.reportValidity()로 보여줘야 출력

// [문법]
해당input.setCustomValidity('메시지')

<input type="text" value="test" minlength="4" id="myInput">
<button onclick="validateInput()">확인</button>

<script>
  function validateInput() {
    const input = document.getElementById('myInput');

    if (!input.checkValidity()) {
      input.setCustomValidity('형식이 틀려요!');
    } else {
      input.setCustomValidity('');  // 유효하면 메시지 초기화!
    }

    input.reportValidity();  // 검사 및 메시지 표시
  }
</script>

---

reporValidity()

• checkValidity()처럼 유효성을 검사하면서 브라우저가 직접 에러 메시지를 표시 (경고창 느낌)
• 유효성 오류 + 브라우저 메시지 표시
• 언제 사용?
  • 유효성 문제가 있을 때, 사용자가 그 내용을 즉시 알아야 할 때
  • 폼 제출 시 안내

// [문법]
해당input.re[prtValidity()

<input type="text" value="test" minlength="4" id="myInput">
<button onclick="validateInput()">확인</button>

<script>    
const input = document.getElementById('myInput');
const validateInput = () => input.reportValidity();
</script>

---