JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<fieldset class="event_questions" id="personal-information-1407948984"><h4 class="reg-quest-title section-title">Personal Information</h4><input name="fname" type="hidden" value="" class="ee-reg-page-questions" /><div class="event_form_field"><label for="fname" class="ee-reg-page-questions">First Name<em>*</em></label> <input type="text"  title="" class=" required  ee-reg-page-questions ee-reg-page-text-input  fname" id="fname-59-0-1" name="fname" value=""  /></div><input name="lname" type="hidden" value="" class="ee-reg-page-questions" /><div class="event_form_field"><label for="lname" class="ee-reg-page-questions">Last Name<em>*</em></label> <input type="text"  title="" class=" required  ee-reg-page-questions ee-reg-page-text-input  lname" id="lname-59-0-1" name="lname"  /></div><input name="email" type="hidden" value="" class="ee-reg-page-questions" /><div class="event_form_field"><label for="email" class="ee-reg-page-questions">Email<em>*</em></label> <input type="text"  title="" class=" required email ee-reg-page-questions ee-reg-page-text-input  email" id="email-59-0-1" name="email"  /></div><div class="event_form_field"><label for="phone" class="ee-reg-page-questions">Phone</label> <input type="text"  class="ee-reg-page-questions ee-reg-page-text-input  phone" id="phone-59-0-1" name="phone" value=""  /></div><div class="event_form_field"><label for="TEXT_13" class="ee-reg-page-questions">Date of birth (mm/dd/yyyy)<em>*</em></label> <input type="text"  title="" class=" required  ee-reg-page-questions ee-reg-page-text-input  TEXT_13" id="TEXT_13-59-0-1" name="TEXT_13" value=""  /></div><p class="age-disclaimer">*It is required of minors (under age 18) that their parent or legal guardian sign the appropriate waiver or release document for this event. Age information is collected for project planning purposes only.</p></fieldset>

JavaScript

var x = document.getElementsByClassName("phone")[0];
x.addEventListener("blur", formatPhone, true);


function formatPhone() {
    var obj = document.getElementsByClassName("phone")[0];
    var numbers = obj.value.replace(/\D/g, ''),
        char = {0:'(',3:') ',6:'-'};
    obj.value = '';
    for (var i = 0; i < numbers.length; i++) {
        obj.value += (char[i]||'') + numbers[i];
    }
}