时间戳

首页 > 解决方案 > 如何通过在javascript中单击鼠标触发输入中的按键

javascript - 如何通过在javascript中单击鼠标触发输入中的按键

问题描述

我有一个用例，我需要通过触摸/鼠标单击在输入字段中触发按键事件

我已经尝试了许多来自stackoverflow答案的方法，例如 .trigger($.Event( 但是似乎没有一个有效。

我可以通过更改输入“val”来获得这个“工作”。但是，框架内还有其他事件是通过按键激活的，所以我真的需要模拟按键而不是附加“val”。

这是示例非工作代码：

<!doctype html>
<html>
  <head>
    <style>
      .numKey { padding:16px; }
    </style>
  </head>
<body>
  <form id="lf" method="post">
    <div><input id="username" class="username"  type="tel" maxLength="13"  autofocus="autofocus"/></div>
  </form>
  <script type="text/javascript">
    var userinput = document.getElementsByClassName('username')[0];
    function triggerEvent(el, type, keyCode) {
      if ('createEvent' in document) {
        console.log(keyCode)
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.keyCode = keyCode;
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
      } else {
        // IE 8
        var e = document.createEventObject();
        e.keyCode = keyCode;
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
      }
    }

    $(function() {
      $('.numKey').on('click touchstart', function() {
        var char = $(this).text().charCodeAt(0);
        userinput.focus();
        triggerEvent(userinput, 'keydown', char); 
      });
    });
  </script>
  <table id="keypad">
    <tr>
      <td>
        <div class="numKey">7</div>
      </td>
      <td>
        <div class="numKey">8</div>
      </td>
      <td>
        <div class="numKey">9</div>
      </td>
    </tr>
  </table>
</body>
</html>

https://jsfiddle.net/b8o0xqgs/7/

请有人可以告诉我我做错了什么？

标签： javascript

解决方案

我测试了这段代码并验证它会向输入发出一个“按键”事件：

  const myInput = document.getElementById('username');

  function inputKeyPress () {
    const e = new KeyboardEvent('keypress');
    myInput.dispatchEvent(e);
  }

  myInput.addEventListener('keypress', e => {
    console.log('input received keypress:', e);
  });

按下按钮会在控制台上产生这个：

输入收到的按键：- {isTrusted: false, key: "", code: "", location: 0, ctrlKey: false, ...}

从而表明分派的事件被输入接收。

最初的问题是：“框架内还有其他事件可以通过按键激活”。

不知道框架的细节，很难判断这个针对输入的“按键”事件将如何传播。文档说“按键”事件会冒泡，所以它应该很好地传播到 DOM 树上。至少这里的方法表明可以将'keypress'事件指向输入，并且输入可以捕获它。

推荐阅读