{"id":3451,"date":"2015-11-06T17:41:37","date_gmt":"2015-11-06T23:41:37","guid":{"rendered":"http:\/\/neosmart.net\/blog\/?p=3451"},"modified":"2015-11-06T17:44:43","modified_gmt":"2015-11-06T23:44:43","slug":"a-smarter-month-and-year-input-field","status":"publish","type":"post","link":"https:\/\/neosmart.net\/blog\/a-smarter-month-and-year-input-field\/","title":{"rendered":"A smarter month and year input field: solving the credit card expiry conundrum"},"content":{"rendered":"

Every computer-savvy keyboarder has run into this problem before: you’re typing your merry way through a credit card payment form, pounding out your address and credit card numbers, tabbing between the fields so you don’t waste time mucking around with the mouse, when you come across the dreaded expiry date fields:<\/p>\n

\"Expiry<\/a><\/p>\n

You groan. You know what’s coming next. Your card expires in April of 2019. Are they expecting you to type ‘A’ for “April” or to key in “04”? Or maybe it’s just ‘4’? Murphy’s law guarantees\u00a0that whatever sequence you try typing these options in, it’ll be the last one you try. You sigh. You either try the different options haphazardly, holding your breath and cringing when it doesn’t change, or changes to select the wrong value. Finally, you give up and move your hand those excruciatingly-far 6″ to the mouse, and sigh in despair as you resort to clicking on the drop-down box and scrolling through the entries to select the one you’re looking for.<\/p>\n

<\/p>\n

What if I told you there was a better way? And, no, it’s not doing something like graying-out some sample placeholder text and hoping your customers won’t be confused, thinking that was a pre-selected month\/year. Here, try it out yourself. Just click in the first input field (“Just a place for you to start tabbing…”) then <tab> your way across the rest of the form and key your choice of month and year, in any<\/em> format you like. The form will magically change itself based on who you are and what kind of preferences you have, and it’ll change accordingly to make sure that whatever you end up typing will work!<\/p>\n