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

Posted 2023-05-08

【中文标题】使用 jQuery 检测键盘键并为此添加功能

【英文标题】：Detect Keyboard keys and add function for this using jQuery

【发布时间】：2018-03-13 07:08:14

【问题描述】：

嗨，我有一个图像上传表单，选择上传图像时，它将显示预览。

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

我为图像编写了可调整大小、可拖动的函数。

所以当我点击选定的 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'); 不工作。

【问题讨论】：

Undo , redo , delete for selected image using jquery的可能重复

一个小时前，您创建了一个几乎相同的问题，只是因为还没有人能够提供答案，那么您应该再等一会儿。

【参考方案1】：

键盘事件不会发送到 img-selected 对象。 到现在为止，对于键盘处理，我一直使用这种格式并且效果很好。

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

function handleKeyDown(e)

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

希望对你有所帮助。

【讨论】：

我会检查这个。谢谢。但是你从哪里得到这个 e.keyCode === 46

您可以轻松查看console.log(e.keyCode)

由于某种原因它不起作用。你能举个例子吗。在jsfiddle.net/vd11qyzv/7中试试我的代码

但我想要的是jsfiddle.net/vd11qyzv/9。请在此处查看 .$(e.target).is(".newly-added") === true 这很重要。为什么这段代码不起作用

您无法使用 e.target，因为在文档上捕获了关键事件，因此 e.target 是“正文”。看到这个jsfiddle.net/vd11qyzv/10