javascript - HTML5 INPUT type='number' - distinguish between focus and value-change mouse clicks - Stack Overflo

admin管理员组

文章数量:1279009

In the HTML5 INPUT type='number' the user can change the value by clicking on up/down arrows that are part of the INPUT box. The user might also click in the box for focus or for editing its contents.

Is there any easy way to distinguish between these two activities in the click trigger?

---

from @cvsguimaraes answer, which better demonstrates the theory.

using his methodology, here is my finished(?) version. the purpose: make sure regular change triggers are called when using +/- to change data.

// input/mouseup triggers to call change from +/- mouse clicks
// want to wait 500ms before calling change in case successive clicks
render.inputCh = false;
render.inputCt = 0;
render.inputFn  = function(e) {
    render.inputCh = true;
}
render.mouseupFn  = function(e) {
    if( render.inputCh ) {
        render.inputCh = false;
        render.inputCt++;
        setTimeout( next, 500 );
    }       
    function next() {
        render.inputCt--;
        if( render.inputCt ) return;
        var change = document.createEvent("Event");
        change.initEvent('change',true,true);
        e.target.dispatchEvent(change);
    }
}

// using input/mouseup triggers
document.getElementById('number').addListener('input',render.inputFn,true);
document.getElementById('number').addListener('mouseup',render.mouseuptFn,true);

// normal change trigger - will be called normally and via +/- mouse click
document.getElementById('number').addListener('change',changeFn,false);

on chrome it's working flawlessly so far except that when you remove focus from the ITEM the change trigger will kick in again. I solved this by having a low level change trigger that stops propagation if the previous change call was from the mouseup.

In the HTML5 INPUT type='number' the user can change the value by clicking on up/down arrows that are part of the INPUT box. The user might also click in the box for focus or for editing its contents.

Is there any easy way to distinguish between these two activities in the click trigger?

---

from @cvsguimaraes answer, which better demonstrates the theory.

using his methodology, here is my finished(?) version. the purpose: make sure regular change triggers are called when using +/- to change data.

// input/mouseup triggers to call change from +/- mouse clicks
// want to wait 500ms before calling change in case successive clicks
render.inputCh = false;
render.inputCt = 0;
render.inputFn  = function(e) {
    render.inputCh = true;
}
render.mouseupFn  = function(e) {
    if( render.inputCh ) {
        render.inputCh = false;
        render.inputCt++;
        setTimeout( next, 500 );
    }       
    function next() {
        render.inputCt--;
        if( render.inputCt ) return;
        var change = document.createEvent("Event");
        change.initEvent('change',true,true);
        e.target.dispatchEvent(change);
    }
}

// using input/mouseup triggers
document.getElementById('number').addListener('input',render.inputFn,true);
document.getElementById('number').addListener('mouseup',render.mouseuptFn,true);

// normal change trigger - will be called normally and via +/- mouse click
document.getElementById('number').addListener('change',changeFn,false);

on chrome it's working flawlessly so far except that when you remove focus from the ITEM the change trigger will kick in again. I solved this by having a low level change trigger that stops propagation if the previous change call was from the mouseup.

• javascript
• html
• input
• click

Share Improve this question Follow edited Sep 6, 2011 at 6:49 cc young asked Sep 1, 2011 at 9:18 cc youngcc young 20.2k3232 gold badges9494 silver badges150150 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Here is a demo of how you can capture and analyze which events change the input and in what order.

var input = document.getElementById('number'),
    events = [
        "click",
        "mousedown",
        "mouseup",
        "focus",
        "change",
        "input",
        "keydown",
        "keypress",
        "keyup"
    ];
events.forEach(function(ev) {
    input.addEventListener(ev, function() {
        console.log(ev, ' => ', input.value);
    }, false);
});

<input type="number" id="number" />

When the user change the value by clicking on up/down arrows the input event is triggered conveniently between mousedown and mouseup.

const input = document.getElementById('age')
const on = (ev, fn) => input.addEventListener(ev, fn)

const status = document.getElementById('status')
const write = (...txt) => status.innerText = txt.join()

let lastEv = 'none';
on('keydown', () => lastEv = 'keydown')
on('mousedown', () => lastEv = 'mousedown')

on('input', () => {
  if (lastEv === 'mousedown') write('changed from mouse', input.value);
  if (lastEv === 'keydown') write('changed from keyboard', input.value)
});

<input id="age" type="number" value=30> <br>
<div id="status"></div>

本文标签： javascriptHTML5 INPUT type39number39distinguish between focus and valuechange mouse clicksStack Overflow