キーボードのキーを検出し、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/7/

UPDATED FIDDLE

を確認してください。このhttps://jsfiddle.net/vd11qyzv/9/を確認してください。ここで

if ($(e.target).is(".newly-added") === true) { alert('abc'); }が機能しません。

Answer 1

キーボードイベントはimg-selectedオブジェクトにはありません。 今までのキーボード操作では、この形式を使い、うまくいきました。

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

function handleKeyDown(e){ 

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

} 

希望します。