Customizing Zip Code field

Options
Kim Ethridge
Kim Ethridge ✭
Ancient Membership Facilitator 1 Name Dropper Photogenic
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
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?
Tagged:

Comments

  • Kyle Booth
    Kyle Booth ✭
    Fifth Anniversary Facilitator 1 Name Dropper Photogenic
    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
    Kyle Booth ✭
    Fifth Anniversary Facilitator 1 Name Dropper Photogenic
    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>

Categories