자바스크립트를 사용하여 input 태그의 placeholder 값을 가져오거나 변경 가능한 프로퍼티 placeholder에 대하여 알아봅니다.

placeholder



자바스크립트 프로퍼티 placeholder는 input 태그에 사용하여 적용된 placeholder의 값을 변경하거나 가져올 수 있습니다. 그럼 사용 방법 및 간단한 예제를 아래에서 알아보겠습니다.



! placeholder 값 가져오기
먼저 placeholder의 값을 가져오는 방법입니다. input 태그를 inputEle라는 변수에 저장하고 해당 엘리먼트에 DOM 프로퍼티 placeholder를 사용하여 값을 출력하는 예제입니다.
<input placeholder="텍스트를 입력하세요" />
위와 같은 태그가 존재하는 경우 아래처럼 값을 가져옵니다.

inputEle = document.querySelector('input');
myPlaceholder = inputEle.placeholder;
console.log(myPlaceholder )

출력하면 아래와 같이 나타납니다.
"텍스트를 입력하세요"


! placeholder 값 변경하기
이번에는 값을 변경하는 경우를 알아봅니다. "테스트 중입니다."로  변경 할 경우 아래와 같이 수행합니다.
inputEle.placeholder = '테스트 중입니다.';

이처럼 placeholder를 사용하여 값을 변경하는 것이 가능합니다.
# 참고사항
placeholder의 값은 input 태그의 placeholder 어트로뷰트를 수정하는 것과 동일하게 동작합니다. 값을 가져오거나 변경하는 방법으로 아래의 프로퍼티를 사용할 수 있습니다.
setAttribute()
getAttribute()


! 브라우저 호환
대부분의 브라우저에서 호환되며 IE의 경우 IE 10 이상 부터 사용이 가능합니다.