HTML DOM 입력 비밀번호 defaultValue 속성

<시간/>

HTML DOM 입력 암호 defaultValue 속성은 암호 필드의 defaultValue를 설정하거나 가져오는 데 사용됩니다. 요소의 defaultValue는 value 속성에 할당된 값입니다. value 속성과 defaultValue 속성의 차이점은 defaultValue 속성은 지정된 원래 기본값을 유지하는 반면 value 속성은 입력 필드의 사용자 입력에 따라 변경된다는 것입니다.

구문

다음은 defaultValue 속성을 설정하는 구문입니다 -

passwordObject.defaultValue = value

여기서 "값"은 비밀번호 필드 기본값입니다.

예시

Input Password defaultValue 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<h1>Input Password defaultValue Property</h1>
Password: <input type="password" id="PASS" value="abcd123">
<p>Change the above password field default value by clicking on the CHANGE button</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeDefault() {
      document.getElementById("PASS").defaultValue="Password1234";
      var P=document.getElementById("PASS").defaultValue;
      document.getElementById("Sample").innerHTML = "Default value has been changed from abc123 to "+P ;
   }
</script>
</body>
</html>

출력

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

HTML DOM 입력 비밀번호 defaultValue 속성

CHANGE 버튼을 클릭하면 -

HTML DOM 입력 비밀번호 defaultValue 속성

위의 예에서 -

먼저 id가 "PASS"이고 값이 "abcd123"인 비밀번호 입력 필드를 만들었습니다.

Password: <input type="password" id="PASS" value="abcd123">

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

<button type="button" onclick="changeDefault()">CHANGE</button>

changeDefault() 메서드는 getElementById() 메서드를 사용하여 암호 유형의 입력 필드를 가져오고 defaultValue 속성을 "Password123"으로 설정합니다. 그런 다음 getElementById() 메서드를 다시 사용하고 변수 P에 할당하여 암호 유형이 있는 입력의 defaultValue 속성을 가져옵니다. 그런 다음 이 변수는 단락의 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 표시됩니다. 피>

function changeDefault() {
   document.getElementById("PASS").defaultValue="Password1234";
   var P=document.getElementById("PASS").defaultValue;
   document.getElementById("demo").innerHTML = "Default value has been changed from abc123 to "+P ;
}

로 변경되었습니다.