Question

您好我有一个图片上传表单，当选择上传图片时，它也会显示预览。

＆＃13;

$( 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");
      }
    });
  } 
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

我为图像编写了可调整大小的可拖动功能。

所以当我点击选中的img并按下键盘上的删除按钮时，我需要删除该图像。如果通过键盘按下撤消，我必须将其取回。我怎样才能实现这个目标

我看到了jQuery。热键，https://github.com/jeresig/jquery.hotkeys

我写下面的代码。但它无法正常工作

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

请检查

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

更新的标签

请检查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();
    }

}

希望这会对你有所帮助。

使用jQuery检测键盘键并为此添加功能

1 个答案: