Automatically submit a form after x miles of inactive keyboard

Question

In my form, I have a set of input fields where the user can enter a value. When you change one of these fields, the form is automatically submitted.

Now the problem is that the user remains in the last field, takes the mouse and presses the OK button (of another form) without leaving the text field. The change event does not fire, and old, invalid values ​​are passed to the next page.

I want to trigger an onchange event after a few milliseconds of an inactive keyboard. Just like most autocomplete plugins.
I think that I could implement a timer that starts the countdown when you enter the input field and is reset every time a key is pressed, and then when it reaches zero, the onchange event will occur.

I'm not going to reinvent the wheel and wondered if such a feature is available anywhere.
Suggestions?

Answer 1

I had a similar problem and created the jQuery plugin that is currently used in the internal application. It should trigger a change event after the user completes the input.

If you are not using jQuery, the code can still be adapted to anything else.

jQuery.fn.handleKeyboardChange = function(nDelay) { // Utility function to test if a keyboard event should be ignored function shouldIgnore(event) { var mapIgnoredKeys = { 9:true, // Tab 16:true, 17:true, 18:true, // Shift, Alt, Ctrl 37:true, 38:true, 39:true, 40:true, // Arrows 91:true, 92:true, 93:true // Windows keys }; return mapIgnoredKeys[event.which]; } // Utility function to fire OUR change event if the value was actually changed function fireChange($element) { if( $element.val() != jQuery.data($element[0], "valueLast") ) { jQuery.data($element[0], "valueLast", $element.val()) $element.trigger("change"); } } // The currently running timeout, // will be accessed with closures var timeout = 0; // Utility function to cancel a previously set timeout function clearPreviousTimeout() { if( timeout ) { clearTimeout(timeout); } } return this .keydown(function(event) { if( shouldIgnore(event) ) return; // User pressed a key, stop the timeout for now clearPreviousTimeout(); return null; }) .keyup(function(event) { if( shouldIgnore(event) ) return; // Start a timeout to fire our event after some time of inactivity // Eventually cancel a previously running timeout clearPreviousTimeout(); var $self = $(this); timeout = setTimeout(function(){ fireChange($self) }, nDelay); }) .change(function() { // Fire a change // Use our function instead of just firing the event // Because we want to check if value really changed since // our previous event. // This is for when the browser fires the change event // though we already fired the event because of the timeout fireChange($(this)); }) ; } 

Using:

 $("#my_input").handleKeyboardChange(300).change(function() { // value has changed! }); 

Answer 2

I do not know that such a decision would be considered a "new invention." As you said, this sounds like nothing more than a simple setTimeout after loading the page. After about 3000 milliseconds, form.submit () is executed.

I would probably restart the countdown with every keystroke to give the user enough time to make their record.

Answer 3

Does onBlur not work, so when the user moves to the next field or clicks something else, the value is saved?