New ES6 answer

You can still do this using plain JavaScript.

Html

<input id="phoneNumber" maxlength="16"/>

JavaScript (ES6)

const isNumericInput = (event) => {
    const key = event.keyCode;
    return ((key >= 48 && key <= 57) || // Allow number line
        (key >= 96 && key <= 105) // Allow number pad
    );
};

const isModifierKey = (event) => {
    const key = event.keyCode;
    return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
        (key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
        (key > 36 && key < 41) || // Allow left, up, right, down
        (
            // Allow Ctrl/Command + A,C,V,X,Z
            (event.ctrlKey === true || event.metaKey === true) &&
            (key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
        )
};

const enforceFormat = (event) => {
    // Input must be of a valid number format or a modifier key, and not longer than ten digits
    if(!isNumericInput(event) && !isModifierKey(event)){
        event.preventDefault();
    }
};

const formatToPhone = (event) => {
    if(isModifierKey(event)) {return;}

    // I am lazy and don't like to type things more than once
    const target = event.target;
    const input = target.value.replace(/\D/g,'').substring(0,10); // First ten digits of input only
    const zip = input.substring(0,3);
    const middle = input.substring(3,6);
    const last = input.substring(6,10);

    if(input.length > 6){target.value = '(${zip}) ${middle} - ${last}';}
    else if(input.length > 3){target.value = '(${zip}) ${middle}';}
    else if(input.length > 0){target.value = '(${zip}';}
};

const inputElement = document.getElementById('phoneNumber');
inputElement.addEventListener('keydown',enforceFormat);
inputElement.addEventListener('keyup',formatToPhone);

      

        
        
        
      

    

And if you want to mess around with this:
https://jsfiddle.net/rafj3md0/

Disclaimer:
It's worth noting that it is a little weird if you are trying to change the midpoint of a number due to the way browsers handle carat placement after setting the value of an element. The solution to this problem is doable, but it would take more time than I have now, and there are libraries that handle this kind of thing.

Old ES5 Answer

If your HTML looks like this:
<input type="text" id="phoneNumber"/>

Your JavaScript function could simply be:

// A function to format text to look like a phone number
function phoneFormat(input){
        // Strip all characters from the input except digits
        input = input.replace(/\D/g,'');

        // Trim the remaining input to ten characters, to preserve phone number format
        input = input.substring(0,10);

        // Based upon the length of the string, we add formatting as necessary
        var size = input.length;
        if(size == 0){
                input = input;
        }else if(size < 4){
                input = '('+input;
        }else if(size < 7){
                input = '('+input.substring(0,3)+') '+input.substring(3,6);
        }else{
                input = '('+input.substring(0,3)+') '+input.substring(3,6)+' - '+input.substring(6,10);
        }
        return input; 
}

      

        
        
        
      

    

Of course, you need an event listener:

document.getElementById('phoneNumber').addEventListener('keyup',function(evt){
        var phoneNumber = document.getElementById('phoneNumber');
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        phoneNumber.value = phoneFormat(phoneNumber.value);
});

      

        
        
        
      

    

And if you can't store phone numbers as formatted strings (I don't recommend that), you should strip the non-numeric characters before sending the value something like this:
document.getElementById('phoneNumber').value.replace(/\D/g,'');

If you want to see this in action with bonus input filtering check out this fiddle:
http://jsfiddle.net/rm9vg16m/