How to emulate an enter key just cliking a button?

Question

I am just wondering about how can I emulate an ENTER key clicking a button. It is designed as this image, as it is an input field, its working with the enterkey and its inserting the text correctly.

But the button designed has to work as if the "enter" key has been pressed.

For example:

Text: "Hi there"+ENTER KEY --> WORKS WELL;

Text: "Hi there"+ Click button as ENTER KEY PRESSED --> I dont know how to implement it.

The code is the below:

<div class="message-input">
  <input name="message" id="textEle" placeholder="Escribe aquí...">
  <button class="sendMsg">
  <span id="sendBtn" class="fa-stack fa-2x  visible-xs">
    <i class="fa fa-circle fa-stack-2x" style="color:#0f2638"></i>
    <i class="fa fa-paper-plane-o fa-stack-1x fa-inverse"></i>
  </span>
</button>
</div>

I have already the following javascript code, where is cheking every single input key and when its the ENTER one it makes the insert action:

    Template.channel.events({
  'keyup [name="message"]' ( event, template ) {
    handleMessageInsert( event, template );
  }
   }

Please let me know if there is any way to do it.

Thanks a lot!

You can use trigger (http://api.jquery.com/trigger/) to generate an event on a dom element. — Taplar, Dec 22 '17 at 16:02

score 1 · Answer 1 · answered Dec 22 '17 at 16:13

So with native JS:

// buttonEle would be your button, textEle would be your text input
buttonEle.addEventListener('click', function (e) {
   var event = document.createEvent('KeyBoardEvent');
   event.initEvent('keypress', true, false);
   event.key = 'Enter';
   event.keyCode = 13;

  // now dispatch the event from whichever element your other listener is bound on im gonna assume this is the text input

   textEle.dispatchEvent(event);

});

Or with jquery

$(buttonEle).on('click', function (e) {
    var event = jQuery.event('keypress', {'keyCode': 13, 'key': 'Enter'});
   $(textEle).trigger(event);
});

the js part that is working when pressing ENTER key is the following: Template.channel.events({ 'keyup [name="message"]' ( event, template ) { handleMessageInsert( event, template ); }, — Mario Morante, Dec 23 '17 at 18:52

blueren · Answer 2 · 2017-12-26T05:51:03.303

1

@prodigitalson's answer in the meteor way:

template.html

<template name = "magic">
...
...
<div class="message-input">
  <input name="message" placeholder="Escribe aquí...">
  <button class="sendMsg">
  <span id="sendBtn" class="fa-stack fa-2x  visible-xs">
    <i class="fa fa-circle fa-stack-2x" style="color:#0f2638"></i>
    <i class="fa fa-paper-plane-o fa-stack-1x fa-inverse"></i>
  </span>
</button>
...
...
</template>

template.js

Template.magic.events({
    // when you click the button
    'click .sendMsg' (event){
          event.preventDefault();
          // same @prodigitalson's code 
          var e = jQuery.Event("keypress");
            e.which = '13';
            $(textEle).trigger(e);
    }
});

Edit : Check out this answer for simulating a keypress.

edited Dec 26 '17 at 05:51

answered Dec 22 '17 at 17:34

blueren

2,730
4
30
47

its giving me the following error: channel.js:42 Uncaught TypeError: jQuery.event is not a function at Object.click .sendMsg – Mario Morante Dec 23 '17 at 18:56
I've updated my answer based on [this](https://stackoverflow.com/a/3368599/1745073) – blueren Dec 26 '17 at 05:49
Sorry @blueren I don´t get it. The issue that Im having is the following... Think that you have the input field of the main question, where you have already written for example the word "hell". How can I do in order to get an ending "o" inside the same input field to complete the word "hello" just by clicking the botton? ( i think is the same case as if we are talking about the enter key but with the 79 number) . Check the main question, I have added some info. Thanks! – Mario Morante Dec 27 '17 at 19:54

How to emulate an enter key just cliking a button?

2 Answers2