JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />

JavaScript

$(document).ready(function(){
    $('input[name=user_phone]').keyup(function() {
        var number = $('input[name=user_phone]').val();
        if (!$.contains(number,'(') && !$.contains(number,')') && number.length === 2) {            
            $('input[name=user_phone]').val('(' + number + ')');
        } else if ($.contains(number,'(') && !$.contains(number,')') && number.length === 3) {
            $(this).val(number + ')');
        } else if (!$.contains(number,'(') && $.contains(number,')') && number.length === 3) {
            $(this).val('(' + number);
        }
    });
});