[js] JS - maxLength 속성 ★ - INPUT 입력 가능 최대 글자수 설정/반환 (= maxLength속성 = 맥스렝스속성) ※ 인풋 맥스렝스 속성 / 입력 완료 시 다른 입력 필드로 자동 이동

목차

1. maxLength 예제 - INPUT 입력 가능 최대 글자수 얻기
2. maxLength 정의
3. maxLength 구문
4. maxLength 예제 - INPUT 입력 가능 최대 글자수 설정
5. maxLength 예제 - 최대 글자수 도착 시 다음 필드로 이동

maxLength 예제 - INPUT 입력 가능 최대 글자수 얻기

 

사이트: <input type="text" id="hz" maxlength="10">

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

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

<script>

function homzzang() {

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

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

}

</script>

 

결과보기

maxLength 정의

 

INPUT 텍스트 필드의 maxlength 속성값 설정/반환.

 

---

 

1.

• maxLength 속성은 텍스트 필드에 입력 가능한 최대 문자수 지정.
• INPUT 텍스트 필드 너비를 글자수로 지정하려면 size 속성 이용.

 

2.

모든 브라우저 지원.

 

maxLength 구문

 

반환

textObject.maxLength

 

설정

textObject.maxLength = number

 

---

[속성값]

 

number

입력 가능한 최대 글자수

 

---

[반환값]

 

입력가능한 최대 글자수를 나타내는 숫자 반환.

 

maxLength 예제 - INPUT 입력 가능 최대 글자수 설정

 

사이트: <input type="text" id="hz">

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

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

<script>

function homzzang() {

  document.getElementById("hz").maxLength = "4";

  document.getElementById("demo").innerHTML = "입력가능 최대글자수: 4";

}

</script>

 

결과보기

maxLength 예제 - 최대 글자수 도착 시 다음 필드로 이동

 

<form id="hz">

  <input type="text" size="3" tabindex="1" maxlength="3" onkeyup="homzzang(this,this.value)"> -

  <input type="text" size="4" tabindex="2" maxlength="4" onkeyup="homzzang(this,this.value)"> -

  <input type="text" size="3" tabindex="3" maxlength="3" onkeyup="homzzang(this,this.value)">

</form>

 

<script>

function homzzang(x, y) {

  if (y.length == x.maxLength) {

    var next = x.tabIndex;

    if (next < document.getElementById("hz").length) {

      document.getElementById("hz").elements[next].focus();

    }

  }

}

</script>

 

결과보기