Question

小提琴：http://jsfiddle.net/qfn04xzj/

var a, b;
$('input:not([type=password]), textarea, select').on('focus', function(event) {
    a = performance.now();
});
$('input:not([type=password]), textarea, select').on('blur', function(event) {
    b = performance.now();
    $('#console').append( $(this).attr('name') + ' took ' + (b - a) + ' ms.' + "<br/>");
});

...有效但它会衡量focus和blur之间的时间。

有什么方法可以衡量实际时间 - 两次更改值之间的输入或时间吗？

Answer 1

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

当然，用户仍然可以键入几个字符，去喝杯咖啡，然后返回并输入其他字符，这将导致很长时间的活动。无法知道用户实际盯着输入花了多少时间。但是，您可以定义＆＃34;超时＆＃34;或假设用户闲置的不活动期。

<强> Fiddle

$('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;
}

Answer 2

您需要简单地获取一个keydown时间戳并将其存储到{{1}中，而不是获取keyup和performance.now()之间的时差（这很愚蠢:)）变量用于稍后的b事件时差比较。

＆＃13;

"input"

＆＃13;

var $fields  = $('input:not([type=password]), textarea, select'),
    $console = $("#console"),
    $total   = $("#totTime"),
    tot=0, a=0, b=0;

$fields.on('input', function() {
    a = performance.now();
    var diff = (a - b)|0; // |0 prevents floated results (happens in FF)
    $console.append( this.name +" took "+ diff +" ms"+ this.value +"<br>");
    $total.text("Total time: "+ (tot+=diff) +" ms");
    b = a;                // Store a into b for later use.
});

＆＃13;

性能方面（因为你正在处理有希望的时间准确性）将元素选择器缓存到变量中，这样你就可以防止在每次输入事件中搜索元素时再次解析DOM。登记/> 同样<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="totTime"></div> <input type="text" name="" id=""> <div id="console"></div>作为事件足以处理复制粘贴，更改等所需的所有内容......

Answer 3

这将为您提供总时间输入：Fiddle

<input type="text" name="" id="">
<div id="total"></div>
<div id="console"></div>

JS

$('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.');
});

测量实际活动时间

3 个答案: