Question

我有以下内容：

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

我失败的尝试是：

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

和

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

问题是如何根据已存储的事件对象触发事件。它可以是鼠标或键盘事件。

P.S。该示例是关于使用鼠标在光标更改/突出显示的支持下运行按下的键的播放。

Answer 1

我想我接近你想要的东西。在jsbin上测试它：http://jsbin.com/epaqej/18 或复制代码：

JavaScript代码：

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>

Answer 2

Ryan，这可能不是你想要的 - 也就是说，你想要一种方法来重新抛出事件并包括高亮/光标位置 - 但它确实允许你从另一个textarea上的一个textarea播放文本条目，包括按键，删除，插入等之间的暂停

<强> HTML

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

<强>的Javascript

var keyslog = [];
var baseTime = 0;

$('#text').bind('keyup keydown keypress', function(e){
    if (baseTime <= 0) baseTime = e.timeStamp;
    keyslog.push({delay:e.timeStamp-baseTime, text:$('#text').val()});
});

$('#simulate').click(function () {
    $simulator = $('#simulator');

    while(keyslog.length > 0) {
        var e = keyslog.shift();

        window.setTimeout(updateText, e.delay, $simulator, e.text);
    }
});

function updateText($s, t) {
    $s.val(t);
}

<强>的jsfiddle

http://jsfiddle.net/ZtgME/1/

Answer 3

使用e.originalEvent

你会进入一个无限循环但是要小心：

你可以从keylog中获取你的活动。

当事件被触发时，它会被“重新添加”到事件处理程序中的keyslog，然后循环会一直增长，直到你的计算机用完为止。

在进入循环之前将keyslog.length分配给局部变量可能是一个解决方案。

从存储的事件对象重新触发javascript事件

3 个答案: