Auto Tab Phone Number Fields?

More
3 years 8 months ago - 3 years 8 months ago #106029 by lmw1
lmw1 created the topic: Auto Tab Phone Number Fields?
How can I auto tab to the next input box for a phone number? *(I have the inputs showing inline/horizontally).

There a 3 input boxes (one for a 3 digit area code, one for a 3 digit prefix, and a 4 digit number).

My current code is:
<script type="text/javascript" charset="utf-8">
 
$(document).ready(function(){
 
// Identify this question 
 var thisQuestion = $('#question{QID}');
 
// Remove width styles 
 $('input[type="text"]', thisQuestion).css('width', 'auto');
 
// Set the size and maxlength 
 $('input[type="text"]:eq(0), input[type="text"]:eq(1)', thisQuestion).attr('size', 3).attr('maxlength', 3); 
 $('input[type="text"]:eq(2)', thisQuestion).attr('size', 4).attr('maxlength', 4); 
 
 });
 
</script>

Any ideas?

Respectfully,
LMW1
Last Edit: 3 years 8 months ago by lmw1. Reason: Add text

Please Log in to join the conversation.

More
3 years 8 months ago #106042 by tpartner
tpartner replied the topic: Auto Tab Phone Number Fields?
You can compare the input value length to the maxlength attribute and, if found to be equal, focus on the next input.

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		// Identify this question 
		//var thisQuestion = $('#question{QID}');
		var thisQuestion = $('#question17360');
 
		// Remove width styles 
		$('input[type="text"]', thisQuestion).css('width', 'auto');
 
		// Set the size and maxlength 
		$('input[type="text"]:eq(0), input[type="text"]:eq(1)', thisQuestion).attr('size', 3).attr('maxlength', 3); 
		$('input[type="text"]:eq(2)', thisQuestion).attr('size', 4).attr('maxlength', 4); 
 
		$('input[type="text"]', thisQuestion).each(function(i) {
			$(this).attr('data-input-index', i);
		});	
 
		// Auto-tab inputs when maxlength reached
		$('input[type="text"]', thisQuestion).keyup(function () {
			if ($(this).val().length == $(this).attr('maxlength')) {
				$('input[data-input-index="'+(Number($(this).attr('data-input-index'))+1)+'"]').focus();
			}
		});
		$('input[type="text"]', thisQuestion).bind('paste', function () {
			var thisInput = $(this);		
			setTimeout(function() {
				if ($(thisInput).val().length == $(thisInput).attr('maxlength')) {
					$('input[data-input-index="'+(Number($(thisInput).attr('data-input-index'))+1)+'"]', thisQuestion).focus();
				}
			}, 100);
		});	
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: lmw1

Please Log in to join the conversation.

More
3 years 8 months ago #106084 by lmw1
lmw1 replied the topic: Auto Tab Phone Number Fields?
Awesome! This works!

Thank you Tony!!!

Respectfully,
LMW

Please Log in to join the conversation.

More
3 years 8 months ago #106266 by lmw1
lmw1 replied the topic: Auto Tab Phone Number Fields?
I just noticed that the telephone number tabbing is not working correctly.

When entering the telephone number in the first box, it tabs DOWN to the second box in the Alternate Phone Number section beneath it.

Obviously, it should tab over to the second box of the main Telephone Number.

Any help on how to correct this would be appreciated.

Respectfully,
LMW

Please Log in to join the conversation.

More
3 years 8 months ago #106269 by tpartner
tpartner replied the topic: Auto Tab Phone Number Fields?
Err...you never said you had two sets of inputs...

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 8 months ago #106422 by lmw1
lmw1 replied the topic: Auto Tab Phone Number Fields?
Sorry Tony. My apologies.

What would the solution be then?

Respectfully,
LMW

Please Log in to join the conversation.

More
3 years 8 months ago #106437 by tpartner
tpartner replied the topic: Auto Tab Phone Number Fields?
Can you attach a sample survey?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 8 months ago #106471 by lmw1
lmw1 replied the topic: Auto Tab Phone Number Fields?
Here yah go. Thanks for all your help Tony!

Respectfully,
LMW
Attachments:

Please Log in to join the conversation.

More
3 years 7 months ago #106489 by tpartner
tpartner replied the topic: Auto Tab Phone Number Fields?
Oops, my bug.

Change this:
$('input[data-input-index="'+(Number($(this).attr('data-input-index'))+1)+'"]').focus();

To this:
$('input[data-input-index="'+(Number($(this).attr('data-input-index'))+1)+'"]', thisQuestion).focus();

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: lmw1

Please Log in to join the conversation.

More
3 years 7 months ago #106971 by lmw1
lmw1 replied the topic: Auto Tab Phone Number Fields?
That worked! Thanks Tony!

Respectfully,
LMW

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!