为什么此javascript onkeypress事件不起作用

Question

This example should fire alert when I add text in the text area, for some reason it does so when I use $('#sentid1').onkeypress , and it only works when I use $('#sentid1').onkeypress .

html part:

<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

How are you testing that keypress event? In order to trigger keypress event you need your element to be either focused or be a parent of some other element on which keypress is triggered, so keypress is bubbled .

You're trying to catch keypress on span , by default span is not focusable, let's make it with tabindex for example

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

Now you can actually click on this span, press some key and see the expected result

Answer 2

You should attach the event handler like this

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

or

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

And it needs to be attached to the #textarea , since that is the element that can take an input, which the span cannot.

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

---

Updated based on a comment

If to get the span , do like this, where you use the event.target.id to get which 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

Try this. For jquery selector $('#sentid1') use the 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

not clear about your approach if you want a alert writing something on textarea you can use key up

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