[js] JS - defaultValue 속성 - INPUT 텍스트필드의 기본값 설정/반환 (= defaultValue속성 = 디폴트밸류속성) ※ 인풋 디폴드밸류 속성

1. defaultValue 예제 - INPUT 텍스트필드 기본값 설정
2. defaultValue 정의
3. defaultValue 구문
4. defaultValue 예제 - INPUT 텍스트필드 기본값 반환
5. defaultValue 예제 - value / defaultValue 속성 차이

defaultValue 예제 - INPUT 텍스트필드 기본값 설정

 

사이트: <input type="text" id="hz" value="홈짱닷컴">

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").defaultValue = "Homzzang.com";

}

</script>

 

결과보기

defaultValue 정의

 

INPUT 텍스트필드의 기본값 설정/반환.

 

---

1.

기본값은 HTML value 속성에 지정된 값임.

defaultValue 속성은 텍스트필드의 내용 변경 여부 확인 시 유용.

2. defaultValue / value 속성  차이

• defaultValue 속성 - 기본값 가짐.
• value 속성 - 기본값 갖다가, 변경 시 변경된 값 가짐.

3.

모든 브라우저 지원.

 

defaultValue 구문

 

반환

textObject.defaultValue

 

설정

textObject.defaultValue = value

 

---

[속성값]

 

value

텍스트필드의 기본값 지정.

 

---

[반환값]

 

텍스트필드의 기본값을 나타내는 문자열 반환.

 

defaultValue 예제 - INPUT 텍스트필드 기본값 반환

 

사이트: <input type="text" id="hz" value="홈짱닷컴">

<button type="button" onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").defaultValue;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

defaultValue 예제 - value / defaultValue 속성 차이

 

사이트: <input type="text" id="hz" value="홈짱닷컴">

<button type="button" onclick="homzzang()">클릭</button>

  

<p id="demo"></p>

<script>

function homzzang() {

  var hz = document.getElementById("hz");

  var defaultVal = hz.defaultValue;

  var currentVal = hz.value;

  

  if (defaultVal == currentVal) {

    document.getElementById("demo").innerHTML = "defaultValue: "

    + hz.defaultValue + " / value: " + hz.value

    + "<br>이젠 Homzzang.com 입력 후 확인해 보세요.";

  } else {

    document.getElementById("demo").innerHTML = "defaultValue: " + defaultVal + " / value: " + currentVal;

  }

}

</script>

결과보기