readonly 입력 필드 더블클릭시 수정할 수 있게 하기
컨텐츠 정보
- 3,672 조회
- 0 추천
- 목록
본문
HTML <input> 요소에 readonly 속성이 설정되어 있으면 기본적으로 사용자가 해당 입력 필드를 수정할 수 없습니다. 하지만 더블 클릭 이벤트를 통해 readonly 속성을 제거하고 수정할 수 있게 할 수 있습니다.
입력 필드를 수정한 후 포커스가 아웃될 때 readonly 속성을 다시 추가하는 기능을 구현하기 위해서는 blur 이벤트를 사용하면 됩니다.
아래에 jQuery를 사용하여 이 기능을 추가한 예제를 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Click to Edit with jQuery</title>
<!-- jQuery 라이브러리 로드 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 더블 클릭시 readonly 속성을 제거하는 기능
$("#editableInput").dblclick(function(){
$(this).prop("readonly", false);
});
// 포커스 아웃될 때 readonly 속성을 추가하는 기능
$("#editableInput").blur(function(){
$(this).prop("readonly", true);
});
});
</script>
</head>
<body>
<input type="text" id="editableInput" value="더블 클릭하여 수정" readonly>
</body>
</html>
이 코드는 다음과 같은 기능을 수행합니다:
- HTML 문서에
id가editableInput인<input>요소를 정의합니다. - jQuery를 사용하여 문서가 준비되면
dblclick이벤트 리스너를editableInput요소에 추가하여 더블 클릭 시readonly속성을 제거합니다. blur이벤트 리스너를editableInput요소에 추가하여 입력 필드에서 포커스가 아웃될 때readonly속성을 다시 추가합니다.
이 코드를 사용하면 사용자가 입력 필드를 더블 클릭하여 readonly 속성을 제거하고 입력 필드를 수정할 수 있으며, 수정이 끝난 후 입력 필드에서 포커스가 아웃되면 readonly 속성이 자동으로 다시 추가됩니다.
