Preventing user from leaving input field

Question

I'm trying to do input field validation on the frontend (IE11).

The user is not supposed to leave the input field when the input validation fails. Nor should he be able to activate other controls on the page.

I try to regain the focus by using

element.onblur = (event) => { 
$(id).focus();
}

and block any clicks by using

window.onclick = (event) => {
event.preventDefault();
window.event.cancelBubble = true;
window.event.returnValue = false;
}

But there are still controls on the page (like Tabs and SelectBoxes) that get activated.

Any ideas on how to restrict the user to a certain input field?

Answer 1

You can use setInterval() Method. Do this:

 var test = false; var myTimer = setInterval( function() { if ( $( '.hello' ).val() == 'hello' ) { test = true; clearInterval( myTimer ) } else { test = false; $( '.hello' ).focus() } }, 1 ) window.onclick = function( e ) { if ( !test && !e.target.matches( '.hello' ) ) e.preventDefault() } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <a href="https://stackoverflow.com">This is a Link</a> <input type="checkbox" id="chk"> <label for="chk">This is a Checkbox</label> </p> <p>Only valid content is: <b>hello</b><br><input type="text" class="hello"></p>