为什么这个 javascript onkeypress 事件不起作用答案

【问题标题】：Why this javascript onkeypress event doesn't work为什么这个 javascript onkeypress 事件不起作用
【发布时间】：2018-03-17 15:41:57
【问题描述】：

当我在文本区域中添加文本时，这个示例应该会触发警报，出于某种原因，当我使用 $('#sentid1').onkeypress 时它会这样做，并且它仅在我使用 $('#sentid1').onkeypress 时才有效。

html部分：

<div id="textarea" contenteditable=""><span id="sentid1" class="sentence"> This is sentence 1. </span><span id="sentid2" class="sentence"> This is sentence 2.</span></div>

Javascript/jQuery 部分：

 if (1==1) {
  $('#sentid1').onkeypress = function(event) {
            alert("theid: " + this.id);
        };  
  } else{
     document.onkeypress = function(event) {
              alert("theid: " + this.id);
           };   
  }

【问题讨论】：

jQuery Learning Center
我在那里没有看到任何与按键事件相关的内容？如果这很容易，请帮忙，我无法在 3-4 小时内把事情说出来，即使是听众和这个。
查看learn.jquery.com/events/event-basics，了解如何使用 jQuery 处理事件（以及如何分配事件处理程序）
我已经发布了一个有效的答案，其中包含一个解释为什么现有的不起作用。

标签： javascript jquery dom-events keyboard-events

【解决方案1】：

您如何测试该按键事件？为了触发 keypress 事件，您需要您的元素是 focused 或者是触发 keypress 的其他元素的父级，因此 keypress 是冒泡。

您正试图捕捉 span 上的按键，默认情况下 span 不可聚焦，让我们以 tabindex 为例

<span id="sentid1" class="sentence" tabindex="0"> This is sentence 1. </span>

现在您实际上可以单击这个跨度，按一些键并查看预期结果

【讨论】：

其实我得到了，需要到处添加tabindex。
如果你真的想在你的 span 元素而不是父 div 上监听 onkeypress 事件，你应该看看 js davidwalsh.name/event-delegate 中的事件委托概念
今天我不需要再学习了，你的解决方案很完美，解决了我过去4-6小时左右无法解决的问题......

【解决方案2】：

你应该像这样附加事件处理程序

$(...).keypress(function(event) {...} )

或

$(...).on('keypress', function(event) {...} )

它需要附加到#textarea，因为这是可以接受输入的元素，span 不能。

$('#textarea').keypress(function(event) {
  alert("theid: " + this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable=""><span id="sentid1" class="sentence"> This is sentence 1. </span><span id="sentid2" class="sentence"> This is sentence 2.</span></div>

根据评论更新

如果要获取span，请这样做，您使用event.target.id 获取哪个span

$('#textarea').keypress(function(event) {
  alert("theid: " + event.target.id);
});

#textarea {
  position: relative;
}
span[contenteditable] {
  outline: none;
}
span[contenteditable]:focus::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  outline: 2px solid lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textarea"><span contenteditable="" id="sentid1" class="sentence"> This is sentence 1. </span><span contenteditable="" id="sentid2" class="sentence"> This is sentence 2.</span></div>

【讨论】：

这可行，但我需要获取按下键的元素的 id。所以我需要确定在哪个特定句子中添加了文本。
@Brana 更新了如何获取跨度的示例
实际上我现在使用添加 tabindex="0" ... 的解决方案，因为这是更简单的解决方案。但这也是很棒的解决方案，非常感谢，

【解决方案3】：

if (1==1) {
  $('#sentid1').Keypress(function(event) {
            alert("theid: " + this.id);
        });  
  } else{
     document.Keypress(function(event) {
              alert("theid: " + this.id);
           });   
  }

【讨论】：

请说明您需要帮助的地方，没有人可以在不知道您面临的问题的情况下帮助您

【解决方案4】：

不清楚你的方法，如果你想在 textarea 上写一些东西，你可以使用 key up

if (1==1) {
  $('#sentid1').keyup(function(event) {
            alert("theid: " + this.id);
        });  
  } else{
     document.keyup(function(event) {
              alert("theid: " + this.id);
           });   
  }

【讨论】：

【解决方案5】：

试试这个。对于 jquery 选择器 $('#sentid1') 使用 jquery keypress

if (1==1) {
  $('#sentid1').keypress(function() {
            alert("theid: " + this.id);
        });  
  } else {
     document.keypress(function() {
              alert("theid: " + this.id);
        });   
  }

【讨论】：

else 部分将无法到达，如果到达则会引发错误。
即使只是第一部分 - $('#sentid1').keypress(function(event) { alert("theid: " + this.id); });
然后将 $('#sentid1') 更改为 $('#textarea')
再次 - 如果你想要按键事件，那么你需要关注元素