Question

在HTML5 INPUT type='number'中，用户可以通过单击属于INPUT框的向上/向下箭头来更改值。用户也可以在框中单击以进行焦点或编辑其内容。

有没有简单的方法可以在click触发器中区分这两个活动？

来自@cvsguimaraes的答案，这更能说明理论。

使用他的方法，这是我的完成（？）版本。目的：确保在使用+/-更改数据时调用常规change触发器。

// 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);

在chrome上它到目前为止完美无缺除了时，当你从ITEM中移除焦点时，change触发器将再次启动。我通过使用低级别更改触发器来解决此问题，如果上一次更改调用来自mouseup，则会停止传播。

Answer 1

Here演示了如何捕获和分析哪些事件会改变输入以及输入的顺序。

HTML：

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

脚本：

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

Answer 2

就是这样！当用户通过单击向上/向下箭头更改值时，它会触发oninput，并且方便地在onmousedown和onmouseup之间触发

<script>
    window.onload = function() {
        changeType = 'none';
        var input = document.getElementById('number');
        var events = [
                "mousedown",
                "mouseup",
                "input",
                "keypress"
            ];
        events.map(function(ev){
            input.addEventListener(ev,function(){
                switch(ev) {
                case 'input':
                    if(changeType!='keypress') changeType = 'input';
                break;
                case 'mouseup':
                    switch(changeType) {
                        case 'mousedown':
                            console.log('normal click');
                        break;
                        case 'keypress':
                            console.log('click with edit via keyboard');
                        break;
                        case 'input':
                            console.log('click on up/down arrows');
                        break;
                    }
                break;
                default:
                    changeType = ev;
                break;
            }
            },false);
        });
    }
</script>
<input type="number" id="number">

修改现在它在按下鼠标时也处理键盘编辑。

修改现在好多了，感谢gion_13

HTML5 INPUT type ='number' - 区分焦点和值更改鼠标点击

2 个答案: