Customizing Zip Code field

Kim Ethridge

Hi, all. Question for you (of course!). It seems the Constituent zip code field used in Event registrations allows any character, not just numbers. Is there a way to change this?

Kyle Booth

If you put something like the following script somewhere in your pagewrapper (either directly or in a reusable page), it should do the trick.


<script>

  var allowOnlyNums = function(selector) {

    var el = document.querySelector(selector);

    if(el) {

      el.setAttribute('type', 'number');

      el.addEventListener('keypress', function (evt) {

        var charCode = (evt.which) ? evt.which : evt.keyCode;

        if (charCode < 48 || charCode > 57) {

          evt.preventDefault();

        }

      });

    }

  }

  document.addEventListener('DOMContentLoaded', function () {

    allowOnlyNums('#ZIP_SELECTED');

  });

</script>

Kyle Booth

And adding these styles will get rid of the little up/down arrows that appear in the zipcode field when you implement the previous script:


<style>

  #ZIP_SELECTED {

    -moz-appearance: textfield;

  }

  #ZIP_SELECTED::-webkit-inner-spin-button,

  #ZIP_SELECTED::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

    /* Removes leftover margin */

  }

</style>