javascript onkeypress input text

Question

I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:

<head>    
</head>
<body>
    <input type="text" id="name" >   
    <script type="text/javascript">             
        var txtId = document.getElementById('name');    
        txtId.addEventListener('keypress', function(e){
            console.log('Pressed!')
        })                      
    </script> 
</body>

Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:

<head>
    <script type="text/javascript">   
        function keyPressListener(){
            var txtId = document.getElementById('name');   
            txtId.addEventListener('keypress', function(e){
                console.log('Pressed!')
            })
        }                   
    </script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">

</body>

So, what exactly difference between above 2 codes?

progrAmmar · Accepted Answer · 2017-04-28 06:18:12Z

2

When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress

<input type="text" id="name" onkeypress="keyPressed()">

<script>
function keyPressed(){
    console.log('Key Pressed');
}
</script>

answered Apr 28, 2017 at 6:18

progrAmmar

2,6805 gold badges32 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prasanth · Accepted Answer · 2017-04-28 06:30:58Z

Why is not working to place above the input -Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded

<body onload="start()">
  <input type="text" id="name">

  <script type="text/javascript">
    function start() {
      var txtId = document.getElementById('name');

      txtId.addEventListener('keypress', function(e) {
        console.log('Pressed!')
      })
    }
  </script>

</body>

And the second one -you are using two function in a single event. So use with any one of the event

if use with inline keypress of keyPressListener() else use Dom event of the keypress (addEventListener)

*Note:

Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .

<head>
<script type="text/javascript">
  function keyPressListener() {
      console.log('Pressed!')
  }
</script>
</head>

<body>
  <input type="text" id="name" onkeypress="keyPressListener()">

</body>

Donald Moore · Accepted Answer · 2022-12-12 14:41:23Z

-1

You can use addEventListener.

Or try this as your input:

Add a ; after keyPressListener():

<input type="text" id="name" onkeypress="keyPressListener();">

If that doesn't work try this:

<input type="text" id="name" onkeypress="keyPressListener(); return true;">

HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.

You can also just grab the element from the DOM and then add the event listener to the element like so:

jQuery: $('#name').onkeypress( function() { //code goes here } );

Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );

edited Dec 12, 2022 at 14:41

Donald Moore

179 bronze badges

answered Apr 28, 2017 at 6:25

imgnx

7962 gold badges13 silver badges31 bronze badges

1 Comment

Matthew Nichols Over a year ago

Why would you say that "addEventListener is deprecated"? developer.mozilla.org/en-US/docs/Web/API/EventTarget/… certainly seems to disagree.

Collectives™ on Stack Overflow

javascript onkeypress input text

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related