jQuery를 사용하여 키보드 키를 감지하고이 기능을 추가하십시오.

Question

안녕하세요. 이미지 업로드 양식이 있으며 이미지 업로드를 선택하면 미리보기도 표시됩니다.

$(function() { 
 
    var inputLocalFont = document.getElementById("user_file"); 
 
    inputLocalFont.addEventListener("change",previewImages,false); 
 
    function previewImages(){ 
 
    var fileList = this.files; 
 
    var anyWindow = window.URL || window.webkitURL; 
 
    for(var i = 0; i < fileList.length; i++){ 
 
     var objectUrl = anyWindow.createObjectURL(fileList[i]); 
 
     $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>'); 
 
     window.URL.revokeObjectURL(fileList[i]); 
 
    } 
 

 
    $(".img-div").draggable(); 
 
    $(".img-div").resizable(); 
 
    $(".newly-added").on("click", function(e) { 
 
     $(".newly-added").removeClass("img-selected"); 
 
     $(this).addClass("img-selected"); 
 
     e.stopPropagation(); 
 
    }); 
 
    $(document).on("click", function(e) { 
 
     if ($(e.target).is(".newly-added") === false) { 
 
     $(".newly-added").removeClass("img-selected"); 
 
     } 
 
    }); 
 
    } 
 
});

.new-multiple { 
 
    width:400px !important; 
 
    height:400px !important; 
 
    background:white; 
 
    border:2px solid red; 
 
    overflow:hidden; 
 
} 
 
    
 
.img-div { 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
.newly-added { 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.img-selected{ 
 
    box-shadow: 1px 2px 6px 6px rgb(206, 206, 206); 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

 
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file"> 
 
<div class="new-multiple"></div>

나는 이미지 모두 크기 조정, 드래그 기능을 작성합니다.

그래서 여기에서 선택한 이미지를 클릭하고 키보드의 삭제 버튼을 누르면 해당 이미지를 삭제해야합니다. 키보드를 통해 실행 취소를 누르면 다시 가져와야합니다. 어떻게해야합니까?

jQuery를 참조하십시오. 단축키, https://github.com/jeresig/jquery.hotkeys

다음 코드를 작성합니다. 하지만

$('.img-selected').bind('del', '$', function(){ 
    alert("yes"); 
}); 

이 https://jsfiddle.net/vd11qyzv/9/을 확인하시기 바랍니다이

https://jsfiddle.net/vd11qyzv/7/

업데이트] 뿐인에게

을 확인하시기 바랍니다 작동하지 않습니다. 여기

if ($(e.target).is(".newly-added") === true) { alert('abc'); }이 작동하지 않습니다.

Answer 1

키보드 이벤트가 img로 선택된 객체로 이동하지 않습니다. 지금까지 키보드를 다루기 위해이 형식을 사용하고 잘 작동했습니다.

$(document).on('keydown', handleKeyDown); 

function handleKeyDown(e){ 

    if(e.keyCode === 46)//delete Key{ 
    deleteActiveObject(); 
    } 

} 

희망이 도움이 될 것입니다.