Question

当我在文本区域中添加文本时，此示例应该触发警报，出于某种原因，当我使用$（'＃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 part：

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

Answer 1

您是如何测试按键事件的？为了触发按键事件，你需要你的元素要么专注，要么是触发按键的其他元素的父元素，所以按键是冒泡。

你试图在范围上抓住按键，默认情况下，跨度不可调焦，让我们用 tabindex 来表示

>

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

现在，您可以在此范围内点击，按某个键并查看预期结果

Answer 2

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

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

或

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

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

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

Answer 3

试试这个。对于jquery selector $（'＃sentid1'），请使用jquery keypress

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

Answer 4

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

Answer 5

如果你想在textarea上写一些东西，你可以使用按键

，那么你的方法就不清楚了

$.ajax({
method:post,
url:"File name you want to send request"

}).done(function(response){

});

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

5 个答案: