JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<form>
<input type="text" name="phone_work" id="phone_work" size="30" maxlength="100" value="" title="" tabindex="3" class="phone">
    <input type="text" name="phone_home" id="phone_work" size="30" maxlength="100" value="" title="" tabindex="3" class="phone">
</form>

JavaScript

YUI().use('node',function(Y){

    Y.all("input[id*='phone']").each(function(i){
        this.on('keyup',function(e){
            
            if(e.keyCode == 8 || e.keyCode == 46){
                return;
            }
            
            var value = this.get('value'),
                newValue = formatPhone(value); 

            if(value !== newValue){
                this.set('value',newValue);
            }
        });
  });
  
    function formatPhone(val){
        if(val.length === 3 || val.length === 7){
            return val += '-';
        }
        else if(val.length === 12){
            return val += ' x';
        }
        return val;
    }

});