HTML DOM 입력 검색 defaultValue 속성

<시간/>

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

구문

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

searchObject.defaultValue = value

여기서 "값"은 검색 필드의 기본값입니다.

예시

Search defaultValue 속성에 대한 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>Change the above search 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("SEARCH1").defaultValue="APPLE";
      var P=document.getElementById("SEARCH1").defaultValue;
      document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
   }
</script>
</body>
</html>

출력

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

HTML DOM 입력 검색 defaultValue 속성

CHANGE 버튼을 클릭하면 -

HTML DOM 입력 검색 defaultValue 속성

위의 예에서 -

먼저 type=”search”, id=”SEARCH1”, name=”fruits”인 요소를 생성했으며 값 속성이 “MANGO”로 설정되었습니다. 검색 필드는 양식 안에 있습니다 -

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>

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

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

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

function changeDefault() {
   document.getElementById("SEARCH1").defaultValue="APPLE";
   var P=document.getElementById("SEARCH1").defaultValue;
   document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
}

로 변경되었습니다.