How do I trigger a key event with javascript?

Question

I have the following input that I want to display an alert when the enter key is pressed. The input id changes on each page load, so I would like to use some of the other attributes, such as the name. I tried the following code, but it does not work.

$('input[name="tmp_post_tag"]').keypress(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    alert('You pressed a "enter" key in textbox');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cred_form_1046_1-textfield-6-1538886027" name="tmp_post_tag" value="" data-taxonomy="post_tag" class="wpt-new- 
    taxonomy-title js-wpt-new-taxonomy-title form-control wpt-form- 
    textfield form-textfield textfield" data-wpt-type="textfield" data-wpt- id="cred_form_1046_1_cred_form_1046_1-textfield-6-1538886027" data-wpt- name="tmp_post_tag" autocomplete="off" type="text">

Thanks in advance.

Why have two name attribute? Also,you need to check in the view page to see if the name attribute still exits,due to your input might be used by some plugin — flyingfox
– flyingfox, Commented Oct 7, 2018 at 4:34
I tried it on my wordpress site, not working. I tried it on codepen, not working. — Theo E
– Theo E, Commented Oct 7, 2018 at 4:36

M.A.K. Ripon · Accepted Answer · 2018-10-07 05:45:43Z

2

Just import Jquery library into the HTML. It should work. And I paste the whole code as following. hope it will help you.

<!DOCTYPE html>
<html>

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

<body>
  <input id="cred_form_1046_1-textfield-6-1538886027" name="tmp_post_tag" value="" data-taxonomy="post_tag" class="wpt-new- 
    taxonomy-title js-wpt-new-taxonomy-title form-control wpt-form- 
    textfield form-textfield textfield" data-wpt-type="textfield" data-wpt- id="cred_form_1046_1_cred_form_1046_1-textfield-6-1538886027" data-wpt- name="tmp_post_tag" autocomplete="off" type="text">
  <script>
    $('input[name="tmp_post_tag"]').keypress(function(event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
        alert('You pressed a "enter" key in textbox');
      }
    });
  </script>
</body>

</html>

edited Oct 7, 2018 at 5:45

M.A.K. Ripon

2,1463 gold badges31 silver badges48 bronze badges

answered Oct 7, 2018 at 5:02

Leogao

3142 silver badges4 bronze badges

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

1 Comment

Simon Cadieux Over a year ago

Also the script tag containing the Jquery, i mean your script not Jquery itself has an importance, because depending on where you put it you might need to check for document ready event.

Collectives™ on Stack Overflow

How do I trigger a key event with javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related