HTML DOM 입력 검색 maxLength 속성

<시간/>

HTML DOM 입력 검색 maxlength 속성은 입력 검색 필드의 maxlength 속성을 설정하거나 반환하는 데 사용됩니다. maxLength 속성은 검색 필드에 입력할 수 있는 최대 문자 수를 지정합니다.

구문

다음은 −

의 구문입니다.

maxLength 속성 설정 -

passwordObject.maxLength = integer

여기서 정수는 검색 필드에 입력할 수 있는 최대 문자 수를 지정합니다. 기본값은 524288입니다.

예시

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

<!DOCTYPE html>
<html>
<body>
<h1>Input Search maxLength Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5">
</form>
<p>Increase the maximum number of characters to be entered for the above search field by clicking below button</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
   function changeMax() {
      document.getElementById("SEARCH1").maxLength = "15";
      document.getElementById("Sample").innerHTML = "Maximum number of characters are increased to 15";
   }
</script>
</body>
</html>

출력

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

HTML DOM 입력 검색 maxLength 속성

CHANGE LENGTH −

를 클릭하면

HTML DOM 입력 검색 maxLength 속성

위의 예에서 -

먼저 type=”search”, id=”SEARCH1”, name=”fruits” 및 maxlength 속성이 5로 설정된 요소를 생성했습니다. maxlength 속성은 주어진 검색에 5자만 있을 수 있음을 지정합니다. 들. 검색 필드는 양식 안에 있습니다 -

<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5"> </form>

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

<button onclick="changeMax()">CHANGE LENGTH</button>

changeMax() 메서드는 getElementById() 메서드를 사용하여 검색 유형이 있는 입력 필드를 가져오고 maxLength 속성을 15로 설정합니다. 그런 다음 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 메시지를 표시하여 이 변경 사항을 표시합니다.

function changeMax() {
   document.getElementById("SEARCH1").maxLength = "15";
   document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15";
}