關於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(''); 
    } 
}; 

而且在鼠標鬆開你清楚，使他們沒有得到執行此超時功能，如果你不希望他們。

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

查看您的修改Fiddle。

clicked變量是全局變量。它基本上是多餘的，但我總是有點過於謹慎，特別是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); 
});