HTML DOM의 Input Email readOnly 속성은 이메일 입력 필드를 사용자가 수정할 수 있는지 여부를 설정하거나 반환하는 기능입니다. 이 속성을 활용하면 특정 이메일 값을 고정해 두고 사용자가 내용을 변경하지 못하도록 만들 수 있습니다.
문법(Syntax)
readOnly 속성의 사용 문법은 다음과 같습니다.
값 반환하기
현재 필드가 읽기 전용인지 여부를 불리언 값(true/false)으로 반환합니다.
inputEmailObject.readOnly
값 설정하기
booleanValue를 지정하여 읽기 전용 상태를 설정합니다.
inputEmailObject.readOnly = booleanValue
불리언(Boolean) 값 종류
booleanValue에 사용할 수 있는 값은 아래와 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 이메일 입력 필드가 읽기 전용(readOnly) 상태임을 의미합니다. |
| false | 이메일 입력 필드가 읽기 전용이 아니며, 수정 가능한 상태임을 의미합니다. |
예제 코드
아래는 Input Email readOnly 속성을 활용한 실제 예제입니다. 읽기 전용으로 설정된 이메일 필드를 클릭하면 안내 메시지가 표시되고, 버튼을 누르면 해당 이메일이 클립보드로 복사됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Email readOnly</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>
<fieldset>
<legend>Email-readOnly</legend>
<label for="EmailSelect">Contact Us :
<input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="Copy Email Id">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Above email is read-only';
function showMessage() {
inputEmail.select();
document.execCommand('copy');
divDisplay.textContent = 'Email Copied: '+inputEmail.value;
}
function showErrorMsg(){
divDisplay.textContent +=', This cannot be edited.'
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
'Copy Email Id' 버튼을 클릭하기 전 - 초기 화면에서는 이메일이 읽기 전용이라는 안내 문구가 표시됩니다.
'Contact Us' 이메일 필드 클릭 시 - 필드가 편집할 수 없다는 추가 메시지가 나타납니다.
'Copy Email Id' 클릭 후 - 이메일 주소가 선택되어 클립보드에 복사되었음을 알려주는 메시지가 표시됩니다.
정리
readOnly 속성은 true 또는 false 값으로 간단하게 제어할 수 있으며, 공지용 이메일 주소나 관리자가 지정한 연락처처럼 사용자가 임의로 변경하면 안 되는 값을 보호할 때 유용하게 활용됩니다. 자바스크립트로 동적으로 상태를 전환할 수도 있어, 상황에 따라 폼의 편집 가능 여부를 유연하게 조절하는 데 적합합니다.