Welcome, Guest
Username: Password: Remember me

TOPIC: Auto Tab Phone Number Fields?

Auto Tab Phone Number Fields? 7 months 2 weeks ago #106029

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
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: 7 months 2 weeks ago by lmw1. Reason: Add text
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 2 weeks ago #106042

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: lmw1

Auto Tab Phone Number Fields? 7 months 2 weeks ago #106084

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
Awesome! This works!

Thank you Tony!!!

Respectfully,
LMW
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 1 week ago #106266

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
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
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 1 week ago #106269

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 6 days ago #106422

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
Sorry Tony. My apologies.

What would the solution be then?

Respectfully,
LMW
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 6 days ago #106437

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 5 days ago #106471

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
Here yah go. Thanks for all your help Tony!

Respectfully,
LMW
Attachments:
The administrator has disabled public write access.

Auto Tab Phone Number Fields? 7 months 5 days ago #106489

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: lmw1

Auto Tab Phone Number Fields? 6 months 3 weeks ago #106971

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
That worked! Thanks Tony!

Respectfully,
LMW
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.164 seconds
Donation Image