素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

タイピングの様子を録画してあとから再生できるようにする

var typingRec=function(elem){
	this.target=elem;
}
typingRec.prototype={
start:function(){
				var str,time=new Date().getTime();
				var self=this;
				this.data=[];
				this.timerId=setInterval(function(){
						if(str!=self.target.value)
						self.data.push(
							[new Date().getTime()-time,self.target.value]
							),str=self.target.value;
						},50);
			},
stop:function(){
			 if(this.timerId)
				 clearInterval(this.timerId);
		 },
clear:function(){
				this.stop();
				this.data=[];
			},
replay:function(){
				 var self=this;
				 this.data.forEach(function(i){
						 setTimeout(function(){
							 self.target.focus();
							 self.target.value=i[1];
							 },i[0]);
						 });
						 }
						 }

var rec=new typingRec(document.getElementsByName('body')[0]);
rec.start();

setTimeout(function(){
		rec.stop();
		rec.replay();
		},10000);

上記のスクリプトをこのページで実行し、コメント欄に適当にタイピングすると、10秒後にリプレイされる。