- Posts: 15
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Auto Tab Phone Number Fields?
- lmw1
- Topic Author
- Offline
- New Member
Less
More
10 years 1 month ago - 10 years 1 month ago #106029
by lmw1
Auto Tab Phone Number Fields? was created by lmw1
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:
Any ideas?
Respectfully,
LMW1
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:
Code:
<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: 10 years 1 month ago by lmw1. Reason: Add text
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 1 month ago #106042
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
Code:
<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
The topic has been locked.
- lmw1
- Topic Author
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 0
10 years 1 month ago #106084
by lmw1
Replied by lmw1 on topic Auto Tab Phone Number Fields?
Awesome! This works!
Thank you Tony!!!
Respectfully,
LMW
Thank you Tony!!!
Respectfully,
LMW
The topic has been locked.
- lmw1
- Topic Author
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 0
10 years 1 month ago #106266
by lmw1
Replied by lmw1 on 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
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 topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 1 month ago #106269
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
The topic has been locked.
- lmw1
- Topic Author
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 0
10 years 1 month ago #106422
by lmw1
Replied by lmw1 on topic Auto Tab Phone Number Fields?
Sorry Tony. My apologies.
What would the solution be then?
Respectfully,
LMW
What would the solution be then?
Respectfully,
LMW
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 1 month ago #106437
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
The topic has been locked.
- lmw1
- Topic Author
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 0
10 years 1 month ago #106471
by lmw1
Replied by lmw1 on topic Auto Tab Phone Number Fields?
Here yah go. Thanks for all your help Tony!
Respectfully,
LMW
Respectfully,
LMW
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 1 month ago #106489
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Auto Tab Phone Number Fields?
Oops, my bug.
Change this:
To this:
Change this:
Code:
$('input[data-input-index="'+(Number($(this).attr('data-input-index'))+1)+'"]').focus();
To this:
Code:
$('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
The topic has been locked.
- lmw1
- Topic Author
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 0
10 years 3 weeks ago #106971
by lmw1
Replied by lmw1 on topic Auto Tab Phone Number Fields?
That worked! Thanks Tony!
Respectfully,
LMW
Respectfully,
LMW
The topic has been locked.