Auto spacing of credit/debit card numbers in form fields

Scott Westbury shared this question 2 years ago
Answered

Does anyone know if you can set Justinmind to add auto spaces for when entering a credit or debit card number into a field so that if the user types 1111222233334444 what is actually shown on screen is 1111 2222 3333 4444 ?

Comments (7)

photo
1

Hi Scott,


I have been investigating this, and unfortunately it's not possible as it requires separating the input field after a certain number of characters. You will need to create 4 different input fields to do this.


Best,


Danielle

photo
1

Thanks for the reply. I guessed that would be the case so can I have fields each limited to 4 characters then as I type 4th character in first field it auto tabs across to next field .

photo
1

Just to follow up with the comment above, the way I'm working this the form field element I add to the page has no borders showing as it's sitting inside a flat visual with the form field so happy to add four fields side by side with just the right amount of spacing to make it look like the system is auto spacing the card number.


So what I need to know is how to restrict 4 characters in each field abd auto jump from fields 1 to 2, 2 to 3 and 3 to 4


Thanks in advance :)

photo
1

Hi Scott,


To do this, create an 'on key up' -> Set Focus on event. Then create a condition that is When.. Count (Input field, 4).


Best,


Danielle

photo
1

Thanks for the reply. You'll have to excuse me as I'm very new to JustinMind, having only started to use it 2 weeks ago. The whole condition stuff is confusing to me.


How would the condition look in full if I had 4 separate form fields, lets call them:


Field1, Field2, Field3, Field4


So that when the user has inputted 4 numbers into Field1 the condition forces the cursor to jump into Field2 and so through to the end?


Thanking you in advance for your expertise with this one. It's very much appreciated.

photo
1

Hi Scott,


Sorry for any confusion. I have attached two screenshots that show the event and the condition for the event. The condition should actually be When count [input field] ≥ 4, instead of = 4.


893d6727937153431313c524915cf627


Best,


Danielle

photo
2

I can't thank you enough Danielle. Your a star :)


It's working perfectly now in my demo and the sales team are over the moon that it's now showing auto-spacing.


Thanks for your patience and cooperation, you've made my week :)


Regards


Scott.