CosminV of Technical Support
11/7/2019 - 6:34 AM

Transform phone number field into type="number" on mobile

Transform phone number field into type="number" on mobile

Example: http://hgckl.pagedemo.co/

<!-- START code for transforming a field into number type on mobile -->
<script>
document.addEventListener("DOMContentLoaded", function() {
      var fieldName = "PHONE NUMBER";
      var fieldLabel = window.__page_generator ? fieldName : base64_encode(fieldName);
      var phoneInputArray = document.getElementsByName(fieldLabel);
      if ((window.innerWidth < 768 && window.__page_generator === true)) {
          for (var i = 0; i < phoneInputArray.length; i++) {
          phoneInputArray[i].type = "number";
          }
        } else if ((window.innerWidth < 620 && !!window.__page_generator === false)) {
            for (var i = 0; i < phoneInputArray.length; i++) {
                phoneInputArray[i].type = "number";
                phoneInputArray[i].style.cssText = "color: #555; font-family:Lato; font-weight: 400; background-color: #ffffff; " + 
          "border-color: #131518; font-size: 20px; line-height: 22px; height: 56px; -webkit-appearance: none; " +
          "border: 1px solid #8095a8; border-radius: 3px; margin: 8px 0 8px 0; padding: 9px 10px 10px 10px; " +
          "width: 100%; box-sizing: border-box; cursor: auto";
          };
      };
  });
</script>
<!-- END code for transforming a field into number type on mobile -->
<!-- START code for transforming a field into number type on mobile -->
<script>
document.addEventListener("DOMContentLoaded", function() {
      var fieldName = "PHONE NUMBER";
      var phoneInputArray = document.getElementsByName(fieldName);
      if (window.innerWidth < 768) {
          for (var i = 0; i < phoneInputArray.length; i++) {
          phoneInputArray[i].type = "number";
          }
        } 
  });
</script>
<!-- END code for transforming a field into number type on mobile -->