Question

我只是想知道如何模拟一个ENTER键点击一个按钮。它设计为this image，因为它是一个输入字段，它使用enterkey并正确插入文本。

但是设计的按钮必须像按下“enter”键一样工作。

例如：

文字：“你好”+输入键 - ＆gt;工作得好;

文字：“Hi there”+点击按钮作为ENTER KEY PRESSED - ＆gt;我不知道如何实现它。

代码如下：

<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>

我已经有了以下javascript代码，其中每个输入键都是cheking的，当它是ENTER时它会进行插入操作：

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

如果有任何办法，请告诉我。

非常感谢！

Answer 1

所以使用原生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);

});

或者使用jquery

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

Answer 2

@ prodigitals以流星的方式回答：

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

编辑：查看此answer以模拟按键。

如何只按一个按钮来模拟一个输入键？

2 个答案: