On mousedown for 5 seconds, clear input field

Question

Is it possible to assign a function to clear an input field if you hold the mouse down on it? Currently i've got the following http://jsfiddle.net/e1kb6esm/6/ where if you click on a field, it increases by one, but what I also need to do is to be able to clear the field if it was clicked by mistake. I was thinking of something to do with

if $this.mousedown(function(e) {

but if I cleared on mousedown it'd also clear the increasing values on click too?

Code:

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

Have you already seen this? http://stackoverflow.com/questions/4961072/jquery-continuous-mousedown — Radonirina Maminiaina, May 11 '15 at 08:53

score 3 · Accepted Answer · answered May 11 '15 at 08:56

3

To achieve this you can start a timer when the mousedown event fires. This event will then clear the field when the 5 second countdown completes. You will also need to hook to the mouseup event to clear the timer if the mouse is released early. Try this:

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

Note that I also improve the incrementing logic slightly.

answered May 11 '15 at 08:56

Rory McCrossan

331,213
40
305
339

Absolutely brilliant, thank you. I'll be having a play around with this to figure out exactly how it works! Thanks again – BN83 May 11 '15 at 09:00
Glad to help. Which bits do you want to know about? – Rory McCrossan May 11 '15 at 09:00
Well i'm looking at `$(this).val(function (i, v) { return (+v || 0) + 1; }).blur();` and I get that the value is being set or changed, and then you're removing the focus with the blur, but i'm not sure what the `(function (i, v) { return (+v || 0) + 1; })` part is doing. I can see it's checking for zero or v then adding 1, but i'm not sure how that works!? – BN83 May 11 '15 at 09:27
1

The [val()](http://api.jquery.com/val/#val-function) method accepts a function which takes two params, the index of the element and it's current value - `v` in my example. I take the `v` and convert it to a number (`+v` is equivalent to `Number(v)`). If this operation gives `NaN`, or `undefined` the `||` check will then convert it to the value of `0` instead. From there the `1` gets added to it. Hopefully that's a clear explanation :) – Rory McCrossan May 11 '15 at 09:30
Hey @Rory McCrossan wondering if you could help me. I assumed the mouseup/mousedown feature would work on my iPad, I was very very wrong and ended up not being able to clear the numbers. I've done a bit of searching and found I need to use `.bind( "touchend", function` would you have any idea how I incorporate that with the code you posted http://jsfiddle.net/e1kb6esm/10/ as I just keep getting errors when trying to replace it. Thanks – BN83 May 22 '15 at 10:18
I've not got much experience with that, but this should work in theory: http://jsfiddle.net/e1kb6esm/11/ IF that doesn't solve it you're probably best to start a new question. I'm sure someone has encountered the problem before. – Rory McCrossan May 22 '15 at 10:19
Cheers bud. I actually just tried the following: `'mousedown touchstart': function () {` and `'mouseup touchend': function () {` which both work, although I have to slide my finger off the field to make it clear, otherwise it adds 1 back in... Odd! http://jsfiddle.net/e1kb6esm/12/ – BN83 May 22 '15 at 10:23

score 0 · Answer 2 · answered May 11 '15 at 08:58

You could set a timeout function to execute after 5 seconds that checks if the mousebutton is still pressed.

setTimeout(checkIfClickedFive, 5000);

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

And on mouseup you clear this timeout functions so that they do not get executed if you don't want them to.

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

See your modified Fiddle.

The clicked variable is a global. It is basically redundant but I am always a little overcautious with timeouts and espacially the clearTimeout method..

score 0 · Answer 3 · edited May 23 '17 at 10:24

Does this fit what you need ? http://jsfiddle.net/3oqa3796/

I added this code (from 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);
});

On mousedown for 5 seconds, clear input field

3 Answers3