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.

2 Answers 2


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;
        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".

  • This is good, but it doesn't address my question of how to tell users that they need to leave the input to commit the change. I won't always be able to edit javascript.
    – alanj
    May 30, 2016 at 13:42
  • right, but with this technique they -don't- need to leave the input field to commit the change. May 30, 2016 at 17:09
  • How would you do it if you can't edit the code?
    – alanj
    May 30, 2016 at 17:15
  • I guess I'd talk to whoever on the product team does have that ability? May 30, 2016 at 21:43
  • I've done that, they can't. Hence the question that I asked.
    – alanj
    May 30, 2016 at 21:55

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

  • 1
    I mention in my question that that's not really an option. onkeyup and onkeypress act in similar ways in this situation.
    – alanj
    May 26, 2016 at 17:10
  • Then better will be to use JS Frameworks like JQuery, Angular JS etc., if you are not using already. May 26, 2016 at 18:40
  • @sagar, Angular (or jQuery for only one feature) might as well be an overkill. Using a large framework or a library doesn't always have to be better.
    – ROAL
    May 26, 2016 at 19:52
  • 2
    Just this: Have You Tried Using jQuery? May 26, 2016 at 19:55
  • @maxathousand nice one. My question only remotely mentions javascript. I'm looking for a way to inform the user how to leave the field, not rewrite my code base.
    – alanj
    May 30, 2016 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.