우클릭 방지 기능을 써서
oncontextmenu="return false" (드래그 선택 가능, 우클릭 불가)
onselectstart="return false" (드래그 선택 불가, 우클릭 가능)
ondragstart="return false" (드래그 선택 가능, 우클릭 가능)
ex) <body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'></body>
기능을 사용해 볼수 있지만...
이렇게 할 경우 페이지 전체가 선택 불가로 변하기 때문에
제이쿼리를 이용해서 특정 텍스트 박스만 드래그 선택 및 더블 클릭 선택 방지 방법을 소개 드립니다.
드래그 선택 금지
.css("pointer-events", "none");
더블 클릭 선택 금지
.parent().css("user-select","none");
더블 클릭 선택 금지 할때 input 태그에 바로하면 적용 안되므로
부모 태그인 td 태그에 해줘야 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$("#textbox02").css("pointer-events", "none");
$("#textbox02").parent().css("user-select","none");
});
</script>
</head>
<body>
<table>
<tr>
<td><input type='text' id = 'textbox02' value = '수정,드래그 불가'/></td>
</tr>
</table>
</body>
</html>반응형
'coding > javascript,jQuery' 카테고리의 다른 글
| javascript - 5단위 라운드업 (0) | 2024.10.30 |
|---|---|
| javascript - 마지막날 구하기 (0) | 2024.10.30 |
| javascript 엑셀 mid함수와 비슷한 함수 (0) | 2024.10.30 |