슬라이드 엔터키, 스페이스바
본문
두가지 질문이 있는데요ㅠㅠ
1)
슬라이더가 있으면 버튼 누르면 다름장으로 넘어가잖아요
혹시 버튼을 클릭이 아니고 엔터키 또는 스페이스바를 누르면
다음으로 넘어가는 기능을 추가하고 싶은데 어떻게 해야하나요ㅠㅠ
2)
특정부분에만 우클릭 안되게 할 수 있을까요?
iframe으로 링크불러서 e-catalog를 올려두었는데 그 부분만 이미지 복사, 붙여넣기가 안되게 하고 싶어요
만약 특정부분만 불가하다면 전체적으로 우클릭 안되게 하는 방법 부탁드립니다
도와주십쇼..ㅠㅠ!
답변 1
1)
버튼 클릭 부분을 분석하고 Event 객체로 엔터/스페이스를 구분해 응용해볼수 있습니다.
2)
window, document 에서 컨텍스트 메뉴를 막는 동작은 다음 링크를 참조해볼수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Element/contextmenu_event
하지만 iframe 은 별도의 window, document 이므로 iframe 안에서 처리가 되어야 접근관련 문제에서 자유로울 수 있고
권한이 없거나 CORS 같은 상태는 상대 사이트의 동의 없이는 조작이 어렵습니다.
추가로 이런 행위는 사용자에게 불편함을 유발할수 있고 사용자 권리침해로 볼수도 있습니다.
그리고 클라이언트 기술로 처리하는것은 클라이언트 기술로 무력화 시킬수 있습니다.
아무리 막아도 엔드유저가 다시 조작을 한다면 무력화 됩니다.
iframe으로 불러왔지만 해당 파일이 있어서 링크 참조하여 작성하였습니다 감사합니다
버튼 부분은 이미지를 넣어서 .on("click",".move",pageMove) 를 사용하였습니다
이벤트..객체? 엔터 스페이스를 어떻게 구분해 응용할까요ㅠㅠ
다음 코드가 도움이 될지 모르겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
function pageMove(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
this.innerText += ',' + e.keyCode;
}
}
$('#slider').on("keydown",".move",pageMove);
});
</script>
<div id="slider">
<button class="move">move</button>
</div>
기존 코드는
<div id="btn_nav">
<img src="images/02_left.prev btn.png" class="move" data-menu=".page2"></img>
<img src="images/02_right.next btn.png" class="move" data-menu=".page16"></img>
</div>
$(start)
.on("click",".move",pageMove)
이거였고, 말씀하신 아래 코드를 추가하였는데 안됩니다ㅠㅠ
어떤 문제일까요
$(function () {
function pageMove(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
this.innerText += ',' + e.keyCode;
}
}
$('#btn_nav').on("keydown",".move",pageMove);
});
this.innerText 는 텍스트를 추가하는 예시코드 입니다.
img Element 는 텍스트를 추가할수 없으므로 상황에 적절한 구문이 필요합니다.
다음 코드가 도움이 될지 모르겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
function pageMove(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
// this.innerText += ',' + e.keyCode;
alert($(this).data('menu'));
}
}
$('#btn_nav').on("keydown",".move",pageMove);
});
</script>
<style>
#btn_nav > a.move:nth-child(1) { background-image: url(images/02_left.prev btn.png); }
#btn_nav > a.move:nth-child(2) { background-image: url(images/02_right.next btn.png); }
</style>
<div id="btn_nav">
<a href="#" class="move" data-menu=".page2">page2</a>
<a href="#" class="move" data-menu=".page16">page16</a>
</div>