Javascript 测量实际活动时间

小提琴：

var a、b；
$（'input:not（[type=password]），textarea，select'）。打开（'focus'，函数（事件）{
a=性能。现在（）；
});
$（'input:not（[type=password]），textarea，select'）。打开（'blur'，函数（事件）{
b=性能。现在（）；
$（'#console'）.append（$（this）.attr（'name'）+'take'+（b-a）+'ms.+“
”）；
});

。。。工作正常，但它测量

聚焦

和

模糊

之间的时间

---

是否有任何方法可以测量实际时间-键入所需的时间或两次值更改之间的时间？

这将为您提供键入的总时间：

JS

$（'input:not（[type=password]），textarea，select'）。打开（'input change keyup'，函数（事件）{
如果（event.type=='input'）{
$（'#console'）.append（“输入：+$（this.val（）+”
）；
}
如果（event.type=='change'）{
$（'#console'）.append（“更改：+$（this.val（）+”
）；
}
});
变量a，b，总计=0；
$（'input:not（[type=password]），textarea，select'）。on（'keydown'，函数（事件）{
a=性能。现在（）；
});
$（'input:not（[type=password]），textarea，select'）。打开（'keyup'，函数（事件）{
b=性能。现在（）；
净风险值=（b-a）；
$（'#console'）.append（$（this）.attr（'name'）+'取'+net+'ms.+''”
）；
var final=总额+=净额；
$（'#total'）.text（'键入的总时间：'+final+'ms.）；
});

您应该首先定义实际时间的含义。如果您指的是第一次和最后一次击键之间的时间，那么下面的代码应该可以工作。每次用户关注输入并监听每次击键时，它都会创建一个对象，并记录第一次和最后一次击键。当输入模糊时，它计算两者之间的差值

当然，用户仍然可以键入几个字符，喝杯咖啡，然后返回并键入其他字符，这将导致很长时间的活动。无法知道用户实际盯着输入花了多少时间。但是，您可以定义一个“超时”或一段不活动的时间，在此之后，您可以假设用户处于空闲状态

$('input:not([type=password]), textarea, select').on('focus', function() {
    new EditingSession($(this));
});

/** 
 * Represents the period of time during which the user is focused on
 * the input.
 */
function EditingSession(input){

    var firstKeydownTime = null;
    var lastKeydownTime = null;
    var sessionId = makeRandomId();

    input.on("keydown." + sessionId, function(){
        // User typed something
        var time = performance.now();
        lastKeydownTime = time;
        if(firstKeydownTime === null){
            firstKeydownTime = time;
        }
    });

    input.on("blur." + sessionId, function(){
        // Editing session finished.

        // Detach all handlers
        input.off("." + sessionId);

        // Print time between first and last keydown
        var time;
        if(firstKeydownTime === null){
            time = 0;
        } else {
            time = lastKeydownTime - firstKeydownTime;
        }
        $('#console').append(input.attr('name') + ' took ' + time + ' ms.' + "<br/>");
    });

}

// Borrowed from http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript    
function makeRandomId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

$（'input:not（[type=password]），textarea，select'）。在（'focus'，function（）上{
新编辑会话（$（this））；
});
/** 
*表示用户关注的时间段
*输入。
*/
函数编辑会话（输入）{
var firstKeydownTime=null；
var lastKeydownTime=null；
var sessionId=makeRandomId（）；
on（“keydown.”+sessionId，function（）{
//用户输入了一些东西
var time=performance.now（）；
lastKeydownTime=时间；
if（firstKeydownTime==null）{
firstKeydownTime=时间；
}
});
input.on（“blur.”+sessionId，function（）{
//编辑会话已完成。
//分离所有处理程序
输入。关闭（“.”+会话ID）；
//第一次和最后一次按键之间的打印时间
var时间；
if（firstKeydownTime==null）{
时间=0；
}否则{
时间=lastKeydownTime-firstKeydownTime；
}
$（'#console'）.append（input.attr（'name'）++'take'+time++'ms.++“
”）；
});
}
//借来http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript    
函数makeRandomId（）{
var text=“”；
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
对于（变量i=0；i<5；i++）
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
}

你只需要获得一个

性能。现在（）

时间戳并将其存储到

b

变量中，以便以后进行

“输入”

事件时间差比较

var$fields=$（'input:not（[type=password]），textarea，select'），
$console=$（“#console”），
$total=$（“#totTime”），
tot=0，a=0，b=0；
$fields.on（'input'，function（）{
a=性能。现在（）；
var diff=（a-b）| 0；//0防止浮动结果（发生在FF中）
$console.append（this.name+“take”+diff+“ms”+this.value+“
”）；
$total.text（“总时间：+（tot+=diff）+“ms”）；
b=a；//将a存储到b中供以后使用。
});

你的问题让我有点困惑。它不是已经在计算用户键入值所花费的时间了吗？你是说类似这样的事情吗？不，它计算的是从
focus
到
blur
的时间，因此它包括我想要消除的空闲不活动时间。用户可能刚刚聚焦了字段，出去喝了杯咖啡，或者切换了选项卡。@raina77ow on
input
？但这并不准确，试着输入“你好”，看看它计算的时间。老实说，不确定你的意思是什么。不过，您可以截取
keydown
事件；只需检查按下的键是否会改变输入的值。借用“总时间”的东西，希望你不要生我的气：*
<input type="text" name="" id="">
<div id="total"></div>
<div id="console"></div>

$('input:not([type=password]), textarea, select').on('input change keyup', function (event) {
    if (event.type == 'input') {
        $('#console').append("input: " + $(this).val() + "<br/>");
    }
    if (event.type == 'change') {
        $('#console').append("change: " + $(this).val() + "<br/>");
    }
});

var a, b, total = 0;
$('input:not([type=password]), textarea, select').on('keydown', function (event) {
    a = performance.now();
});
$('input:not([type=password]), textarea, select').on('keyup', function (event) {
    b = performance.now();
    var net = (b - a);
    $('#console').append($(this).attr('name') + ' took ' + net + ' ms.' + "<br/>");
    var final = total += net;
    $('#total').text('Total time typing: ' + final + ' ms.');
});

$('input:not([type=password]), textarea, select').on('focus', function() {
    new EditingSession($(this));
});

/** 
 * Represents the period of time during which the user is focused on
 * the input.
 */
function EditingSession(input){

    var firstKeydownTime = null;
    var lastKeydownTime = null;
    var sessionId = makeRandomId();

    input.on("keydown." + sessionId, function(){
        // User typed something
        var time = performance.now();
        lastKeydownTime = time;
        if(firstKeydownTime === null){
            firstKeydownTime = time;
        }
    });

    input.on("blur." + sessionId, function(){
        // Editing session finished.

        // Detach all handlers
        input.off("." + sessionId);

        // Print time between first and last keydown
        var time;
        if(firstKeydownTime === null){
            time = 0;
        } else {
            time = lastKeydownTime - firstKeydownTime;
        }
        $('#console').append(input.attr('name') + ' took ' + time + ' ms.' + "<br/>");
    });

}

// Borrowed from http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript    
function makeRandomId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}