Home/ Questions/Q 6820735
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:27:36+00:00

I have the following: <textarea id=text></textarea> <textarea id=simulator></textarea> <br/> <div onclick=simulate()>Simulate</div> keyslog = [];

  • 0

I have the following:

<textarea id="text"></textarea>
<textarea id="simulator"></textarea>
<br/>
<div onclick="simulate()">Simulate</div>

keyslog = [];
$('#text').bind('keyup keydown keypress mousedown mouseup', function(e){
  keyslog.push(e);
}

function simulate(){
    for(var i=0;i<keyslog.length;i++){
        var e = keyslog[i];
        // how to fire "e" event again on #simulator?
    }
}

My failed attempts were:

document.getElementById('simulator').dispatchEvent(e);

And

$('#simulator').trigger(e);

The question is how to trigger an event based on an already stored event object. It can be a Mouse or Keyboard event.

P.S. The example is about running a playback of pressed keys with the support of cursor changing/highlighting using mouse.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I got this close to what you wanted. Test it on jsbin here: http://jsbin.com/epaqej/18
    or copy the code:

    JavaScript code:

    jQuery(function() {
  var keyslog = [], ctime = [], counter = 0, when = [], $simulator = $('#simulator'), $log = $('#log');
  $('#text').bind('keyup keydown keypress mousedown mouseup', function(e){
    when[counter] = Date.now(); // get the current time
    // delay_time is 0 for the first element
    // and the difference between the time past since the last event and the current event otherwise
    e.delay_time = (counter) ? (when[counter] - when[counter-1]) : 0;
    keyslog.push(e);
    counter++;
  });

  $('#simulator').bind('keyup keydown keypress mousedown mouseup', function (e) {
    // console.log(e.type + ' called on #simulator');
  });

  function simulate(current) {
    var e, text = '', char_code, simtext = '';
    // console.log('executing event ' + current + ' of  ' + keyslog.length);
    if (current < keyslog.length) {
       e = keyslog[current];
       setTimeout(function() {
         char_code = e.which || e.charCode || e.keyCode;
         text += e.type + ' called after ' + e.delay_time + '<br />';
         if (e.type === 'keypress') { 
           simtext += String.fromCharCode(char_code); 
         } else if (e.type === 'mousedown') { 
           $simulator.focus(); 
         } else if (e.type === 'mouseup') { 
           $simulator.blur(); 
         }
         $log.append(text); // write to logger
         $simulator.append(simtext); // add text to textarea if exists
         $simulator.trigger(e); // trigger the event on $simulator
         current += 1; // increase the iterator variable
         simulate(current);
       }, e.delay_time);
    } else {
        $log.append(' == FINISHED == ');
    }
  }

  $('#simulate').click(function() {
    simulate(0);
  });
});

    HTML code:

    <!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="events.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #simulate {
    cursor: pointer; border: 2px solid #CCC; width: 80px; text-align: center;
  }
  #container, #log { float: left;}
  #container { width: 25%; }
  #log { width: 50%; }
</style>
</head>
<body>
  <div id="container">
    <h4>Write your text here:</h4>
    <textarea id="text"></textarea>
    <br/><br />
    <div id="simulate">Simulate:</div>
    <br/>
    <textarea id="simulator"></textarea>
  </div>
  <div id="log">
    <h4>Logger here</h4>
  </div>
</body>
</html>
    • 0