HTML5 INPUT type = 'number' - различать фокус и щелчки мыши при изменении значения - PullRequest
7 голосов
/ 01 сентября 2011

В HTML5 INPUT type='number' пользователь может изменить значение, нажимая стрелки вверх / вниз, которые являются частью поля ВВОД. Пользователь может также щелкнуть в поле для фокусировки или для редактирования его содержимого.

Есть ли какой-нибудь простой способ различить эти два действия в триггере 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 работает безупречно до сих пор , за исключением , что при удалении фокуса из ПУНКТА триггер change снова срабатывает. Я решил это с помощью триггера изменения низкого уровня, который останавливает распространение, если предыдущий вызов изменения был из mouseup.

Ответы [ 2 ]

6 голосов
/ 01 сентября 2011

Здесь - демонстрация того, как вы можете фиксировать и анализировать, какие события изменяют входные данные и в каком порядке.

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);
});
4 голосов
/ 01 сентября 2011

Вот и все! Когда пользователь изменяет значение, нажимая стрелки вверх / вниз, он запускает 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">

EDIT Теперь он также обрабатывает редактирование клавиатуры при нажатии мыши.


EDIT Теперь намного лучше, благодаря gion_13

...