HTML DOM에서 Input URL의 maxLength 속성은 URL 타입 입력 필드(<input type="url">)에 입력할 수 있는 최대 문자 수를 반환하거나 설정하는 역할을 합니다. 만약 이 속성이 HTML에서 별도로 지정되어 있지 않다면 기본값인 '-1'이 반환됩니다.
문법
maxLength 속성의 기본적인 사용 문법은 다음과 같습니다.
maxLength 값 가져오기(반환)
inputURLObject.maxLength
maxLength 값 설정하기
inputURLObject.maxLength = number
예제
아래는 Input URL의 maxLength 속성을 활용한 예제입니다. 페이지가 로드되면 현재 maxLength 값이 표시되며, 'Change Maxlength' 버튼을 클릭할 때마다 최대 입력 길이가 10씩 증가합니다. 또한 'Log In' 버튼을 클릭하면 입력된 URL 값을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input URL maxLength</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form id="Google">
<fieldset>
<legend>URL-maxLength</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" maxLength="10">
</label>
<input type="button" onclick="logIN()" value="Log In">
<input type="button" onclick="changeMaxLength()" value="Change Maxlength">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
divDisplay.textContent = 'Maxlength: '+inputURL.maxLength;
function changeMaxLength() {
inputURL.maxLength += 10;
divDisplay.textContent = 'Maxlength: '+inputURL.maxLength;
}
function logIN(){
if(inputURL.value !== '')
divDisplay.textContent = 'Could not identify url, Redirecting to '+inputURL.form.id;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Change Maxlength' 버튼을 클릭하기 전 −
'Change Maxlength' 버튼을 클릭한 후 −
'Log In' 버튼을 클릭하고 URL을 입력한 후 −
참고 사항
- maxLength 속성에 할당하는 값은 반드시 숫자(number)여야 합니다.
- maxLength 값이 정의되어 있지 않으면 '-1'이 반환되며, 이 경우 입력 길이에 제한이 없습니다.
- 이 속성은 읽기와 쓰기가 모두 가능하므로, 자바스크립트를 활용해 런타임 중 동적으로 최대 입력 길이를 조절할 수 있습니다.
- 사용자가 maxLength를 초과하는 문자를 입력하려 하면 브라우저가 자동으로 입력을 차단하므로, 폼 유효성 검사 시 유용하게 활용할 수 있습니다.