How to tell users that they have to change the focus from the input to apply the change

Question

In HTML, if you have an input with an onchange, it doesn't register the change until you leave (or lose focus) that input. There's an onKeyUp function as well which would have the function run as they type. In my case, this input is affecting a graph that can be quite large at times, and typing in 1000, would have to render the graph for 1, 10, 100, then 1000 very quickly which can slow down the browser quite a bit.

So the problem is when a user types in 1000, nothing changes until they leave the input, press enter or tab. What are some ways that I can tell them this? An 'apply' button seems a bit excessive at times if there are many inputs.

Answer 1

onchange is too slow, onkeyup is too fast -- fortunately there is a middle ground, which doesn't require pestering the user with a notification: debounce the input events.

Essentially what this means is that you set the event to trigger on both keyup and blur, but limit the speed at which repeated triggers are taken into account: on receiving a new event, if an event already fired within the last n milliseconds, wait before firing to see if there are more events coming. After the time has elapsed you can assume that the user has finished typing and go ahead and trigger the rerender based on the last event.

One easy-to-use javascript implementation is this:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Which you would use like so (in jQuery for example):

$('input.foo').on('change keyup', function() {
    debounce(function() {
      // rerender your graph here
    });
}, 250); // fire at most every 250ms. Adjust to taste

...but if that doesn't do it for you there are plenty of implementations to be found by searching "debounce".

Answer 2

Try using events like 'OnKeyPress' in JavaScript. I believe you are calling JS functions to send the input data to the Graph values.