HTML DOM 입력 비밀번호 자리 표시자 속성

<시간/>

HTML DOM 입력 암호 자리 표시자 속성은 입력 암호 필드의 자리 표시자 속성 값을 설정하거나 반환하는 데 사용됩니다. placeholder 속성은 사용자가 아무 것도 입력하기 전에 입력 필드 내부에 텍스트를 표시하여 웹 페이지 사용자에게 입력 요소에 대한 힌트를 제공하는 데 사용됩니다. 자리 표시자 텍스트는 기본적으로 회색으로 표시되며 값 속성과 달리 양식에 제출되지 않습니다.

구문

다음은 −

의 구문입니다.

자리 표시자 속성 설정 -

passwordObject.placeholder = text

여기서 text는 암호 필드에 대한 힌트를 지정하는 자리 표시자 텍스트를 나타냅니다.

예시

입력 암호 자리 표시자 속성에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
   function changeHolder() {
      document.getElementById("PASS1").placeholder = "Enter your password here..";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 비밀번호 자리 표시자 속성

CHANGE 버튼을 클릭하면 -

HTML DOM 입력 비밀번호 자리 표시자 속성

위의 예에서 -

먼저 ID가 "PASS1"이고 자리 표시자 속성 값이 "...."로 설정된 입력 암호 필드를 만들었습니다.

Password: <input type="password" id="PASS1" placeholder="....">

그런 다음 사용자가 클릭할 때 changeHolder() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changeHolder()">CHANGE</button>

changeHolder()는 getElementById() 메서드를 사용하여 암호 유형의 입력 요소를 가져옵니다. 그런 다음 자리 표시자 속성 값을 "여기에 암호를 입력하세요.."로 설정합니다. 이는 암호 필드에 반영됩니다 -

function changeHolder() {
   document.getElementById("PASS1").placeholder = "Enter your password here..";
}