代码之家 › 专栏 › 技术社区 › Brana

为什么javascript onkeypress事件不起作用

keyboard-events dom-events jquery javascript

Brana · 技术社区 · 8 年前

当我在文本区域中添加文本时,这个示例应该发出警报,因为某种原因,当我使用 $('#sentid1').onkeypress ,并且仅当我使用 $(“#sentid1”)。ON按键 。

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

5 回复 | 直到 6 年前

davidluckystar 8 年前

您如何测试按键事件?为了触发按键事件,您需要元素 专注的 或者是触发按键的其他元素的父元素,因此按键是 冒泡的 。

你想抓住按键跨度 ,默认情况下,范围不可聚焦,让我们使用 TAB顺序 例如

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

现在你可以点击在此范围内,按一些键并查看预期结果

Asons Oliver Joseph Ash 8 年前

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

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

根据评论更新

如果要获得 跨度 ,这样做,在使用 event.target.id 要得到哪个 跨度

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

Syed Hassaan Ahmed 8 年前

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

sifanovi059 8 年前

不清楚您的方法,如果您希望在文本区域中写入警告内容,可以使用键向上

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

3CxEZiVlQ 8 年前

试试这个。对于jquery选择器$(“#sentid1”),请使用jquery按键

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