Nullifying Browser BACKSPACE and ENTER default behaviour

More
2 years 8 months ago #117991 by kmanapp
kmanapp created the topic: Nullifying Browser BACKSPACE and ENTER default behaviour
Dear friends,

I have always frustrated about the common web browser behavior that associates the BACKSPACE button for "navigating history back" and ENTER button for "submitting form". Users are usually inadvertently/carelessly pressed such buttons and causing them to loosing all inputted data or submitted incomplete/undesired data.

To work around such undesired default web browser behavior, I have tried my best to devise a jQuery script. However, I would rather appreciate if LimeSurvey can build it as an intrinsic feature so that any Survey Admin can simply choose to enable it or not.

P.S. I am still thinking how to avoid "hard-coding" the key event code "8" and "13". Can anyone help so that "myEvent.which" can be compared to something like "keyEventCode.BACKSPACE" or "keyEventCode.ENTER" rather than the numeric value? Thanks.
$(document).ready(function(){
	// Prevent web browser from navigating back while receives keyboard BACKSPACE event (event==8)
	// http://stackoverflow.com/questions/11112127/prevent-backspace-from-navigating-back-with-jquery-like-googles-homepage
	// Web browser 'Opera' needs the event to be nullified is the 'onkeypress' event, not 'onkeydown'.
	// http://jimblackler.net/blog/?p=20
 
	// Prevent web browser from navigating back while receives keyboard ENTER event (event==13)
	// https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#Prevent_the_survey_from_being_submitted_when_users_press_enter
 
	$( document ).keydown( function ( myEvent )
	{
		if( myEvent.which==8 && !$( myEvent.target ).is( 'input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]' ) )
		{
			myEvent.preventDefault();
		}
 
		if( myEvent.which==13 && $( myEvent.target ).is( ':input:not([type=submit]):not([type=button])' ) )
		{
			myEvent.preventDefault();
		}
	});
 
	$( document ).keypress( function ( myEvent )
	{
		if( myEvent.which==8 && !$( myEvent.target ).is( 'input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]' ) )
		{
			myEvent.preventDefault();
		}
 
		if( myEvent.which==13 && $( myEvent.target ).is( ':input:not([type=submit]):not([type=button])' ) )
		{
			myEvent.preventDefault();
		}
	});
});
The following user(s) said Thank You: Ben_V

Please Log in to join the conversation.

More
2 years 8 months ago #117996 by jelo
jelo replied the topic: Nullifying Browser BACKSPACE and ENTER default behaviour

kmanapp wrote: P.S. I am still thinking how to avoid "hard-coding" the key event code "8" and "13". Can anyone help so that "myEvent.which" can be compared to something like "keyEventCode.BACKSPACE" or "keyEventCode.ENTER" rather than the numeric value? Thanks.


What is wrong with the hardcoding here? If the workaround is put into a feature of Limesurvey in the next years, there is still is time to check if any browser/platform is using different codes.

At least with these two keys I wouldn't expect much change.
Take a look at this nice page. I was surprised by the different handling but the basic keys look pretty stable.
unixpapa.com/js/key.html

Please Log in to join the conversation.

More
2 years 7 months ago #119211 by DenisChenu
DenisChenu replied the topic: Nullifying Browser BACKSPACE and ENTER default behaviour

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: kmanapp

Please Log in to join the conversation.

More
2 years 5 months ago - 2 years 5 months ago #120962 by kmanapp
kmanapp replied the topic: Nullifying Browser BACKSPACE and ENTER default behaviour
Thanks Dennis for sharing your full-fledged customized LimeSurvey "template.js" for our reference which sheds lots of lights to us! The "removeBack()" and "disableEnterSubmit()" function are very innovative and workable!

Sorry friends that I found my code previously posted is buggy as to the ENTER behavior while it focused at a TextArea component.

In case friends would still like to refer to my code for study or reference, I am responsible to post the correct code, but I find no avenue to amend my previous post for correction, so I can only make a reply post here.

The capture of ENTER event while the focus is at a TextArea must be disregarded. The active ingredient code should be like this:
if( myEvent.which==13 && $( myEvent.target ).is( ':input:not([type=submit]):not([type=button]):not(textarea)' ) )

Here is the complete code:
$(document).ready(function(){
	// Reference:
	// https://www.limesurvey.org/en/forum/future-features/99733
 
	// Prevent web browser from navigating back while receives keyboard BACKSPACE event (eventCode==8)
	// http://stackoverflow.com/questions/11112127/
 
	// Web browser 'Opera' needs the event to be nullified is the 'onkeypress' event, not 'onkeydown'.
	// http://jimblackler.net/blog/?p=20
 
	// Prevent web browser from navigating back while receives keyboard ENTER event (eventCode==13)
	// https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#Prevent_the_survey_from_being_submitted_when_users_press_enter
 
	// Further Reference:
	// ------------------
	// JavaScript Madness: Keyboard Events
	// http://unixpapa.com/js/key.html
	//
	// 'removeBack()' Function (Line 54 of 'template.js'):
	// https://gitlab.com/Sondages.Pro/SkeletonQuest/blob/master/template.js#L54
	//
	// 'disableEnterSubmit()' Function (Line 65 of 'template.js'):
	// https://gitlab.com/Sondages.Pro/SkeletonQuest/blob/master/template.js#L65
 
	$( document ).keydown( function ( myEvent )
	{
		if( myEvent.which==8 && !$( myEvent.target ).is( 'input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]' ) )
		{
			myEvent.preventDefault();
		}
 
		if( myEvent.which==13 && $( myEvent.target ).is( ':input:not([type=submit]):not([type=button]):not(textarea)' ) )
		{
			myEvent.preventDefault();
		}
	});
 
	$( document ).keypress( function ( myEvent )
	{
		if( myEvent.which==8 && !$( myEvent.target ).is( 'input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]' ) )
		{
			myEvent.preventDefault();
		}
 
		if( myEvent.which==13 && $( myEvent.target ).is( ':input:not([type=submit]):not([type=button]):not(textarea)' ) )
		{
			myEvent.preventDefault();
		}
	});
});
Last Edit: 2 years 5 months ago by kmanapp. Reason: correct typo

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!