In this article, we will be testing the right mobile keyboard for credit cards according to Baymard. It involves getting the right input mode, setting a pattern, disabling validation, disabling auto-correction, and setting the right autocomplete.

Business case: Testing the right mobile keyboard with credit card fields

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that Baymard recommends optimizing the credit card attributes, we expect that adding the correct ones will cause an increase in sales. We’ll measure this using conversion rate”.

To test this hypothesis, we’re going to apply the changes below:

Code

Now for the interesting part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action! Scroll all the way to the bottom for the correct input fields.

var creditcardFields = document.querySelectorAll(".creditcard");

function fixCreditcardFields(inputFields) {
  for (var i = 0; i < inputFields.length; i++) {
    inputFields[i].setAttribute("type", "text");
    inputFields[i].setAttribute("inputmode", "decimal");
    inputFields[i].setAttribute("pattern", "[0-9]*");
    inputFields[i].setAttribute("novalidate", "");
    inputFields[i].setAttribute("autocorrect", "off");
    inputFields[i].setAttribute("autocomplete", "cc-number");
  }
}

fixCreditcardFields(creditcardFields);

Logic

var creditcardFields = document.querySelectorAll(".creditcard");

We start off by declaring a variable called “creditcardFields” with the var keyword. We assign the desired input field using the class called “creditcard”. The querySelectorAll method selects all the input fields with this class on the page. This can be useful if there is more than one credit card field. This can happen with a mobile and desktop version.

function fixCreditcardFields(inputFields) {

Then we declare a function that sets all the attributes we need. We will take an array that we call inputFields as the argument.

for (var i = 0; i < inputFields.length; i++) {

We create a loop that sets the attributes for every input field in the array.

inputFields[i].setAttribute("type", "text");

Then we set the text value to the type attribute.

inputFields[i].setAttribute("inputmode", "decimal");

After that, we set the decimal value to the inputmode attribute.

inputFields[i].setAttribute("pattern", "[0-9]*");

We set a pattern that makes sure you can only input numbers in this field. Other characters would be a mistake.

inputFields[i].setAttribute("novalidate", "");

This removes the standard validation.

inputFields[i].setAttribute("autocorrect", "off");

Then we disable autocorrect.

inputFields[i].setAttribute("autocomplete", "cc-number");

We also want to set the autocomplete so your device knows it should only do this when it knows the credit card number.

}

We close the loop.

}

Then we close the credit card fixing function.

fixCreditcardFields(creditcardFields);

Finally, we call the function with the variable we declared earlier. It will now show the right mobile keyboard.