На mousedown в течение 5 секунд, очистить поле ввода

Question

Можно ли назначить функцию для очистки поля ввода, если вы удерживаете мышь на нем? В настоящее время у меня есть http://jsfiddle.net/e1kb6esm/6/, где, если вы нажмете на поле, оно увеличивается на единицу, но то, что мне также нужно сделать, - это очистить поле, если оно было щелкнуто по ошибке. Я думал что-то делать с

if $this.mousedown(function(e) { 

но если я очистил на MouseDown было бы также очистить увеличивающиеся значения по щелчку тоже?

Код:

<input class="played" type="text" value="" /><br> 
<input class="played" type="text" value="" /><br> 
<input class="played" type="text" value="" /><br> 
<input class="played" type="text" value="" /><br> 
<input class="played" type="text" value="" /> 

$('.played').on('focus', function() { 
    var $this = $(this); 

    if ($this.val() == '') { 
     $this.val('1'); 
     $this.blur(); 
    } else {   
     var value = parseInt($this.val()); 
     $this.val(value + 1);   
     $this.val(); 
     $this.blur(); 
    } 
}); 

Answer 1

Для достижения этой цели вы можете запустить таймер, когда mousedown срабатывает событие. Это событие очистит поле, когда завершится отсчет 5 секунд. Вам также нужно будет подключиться к событию mouseup, чтобы очистить таймер, если мышь выпущена раньше. Попробуйте это:

var timer; 
$('.played').on({ 
    'focus': function() { 
     $(this).val(function (i, v) { 
      return (+v || 0) + 1; 
     }).blur(); 
    }, 
    'mousedown': function() { 
     var $el = $(this); 
     timer = setTimeout(function() { 
      $el.val(''); 
     }, 5000); 
    }, 
    'mouseup': function() { 
     clearTimeout(timer); 
    } 
}); 

Example fiddle

Обратите внимание, что я также немного улучшить увеличивающуюся логику.

Answer 2

Вы можете установить функцию тайм-аута для выполнения через 5 секунд, которая проверяет, нажата ли кнопка мыши.

setTimeout(checkIfClickedFive, 5000); 

function checkIfClickedFive() { 
    if(clicked){ 
     element.val(''); 
    } 
}; 

И MouseUp вы ясно этот тайм-аут функции так, что они не получают выполняются, если вы не хотите.

$('.played').off('focus', function() { 
    clicked = false; 
    clearTimeout(); 
}); 

См. Измененный Fiddle.

Перечисленная переменная является глобальной. Это в основном избыточно, но я всегда немного переоцениваю тайм-ауты и особенно метод clearTimeout.

Answer 3

Соответствует ли это тому, что вам нужно? http://jsfiddle.net/3oqa3796/

Я добавил этот код (от how to calculate time during mousedown event in jquery?):

$('.played').mousedown(function(e) { 
    console.log($(this)); 
    var element = $(this); 
    clearTimeout(this.downTimer); 
    this.downTimer = setTimeout(function() { 
     element[0].value=""; 
     console.log(element); 
    }, 5000); 
}).mouseup(function(e) { 
    clearTimeout(this.downTimer); 
});