JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="description" content="jQuery-Mask-Plugin - A jQuery plugin to make field masks" />
  <meta name="author" content="Igor Escobar" />
  <title>jQuery-Mask-Plugin - A jQuery plugin to make field masks.</title>

  <link rel="stylesheet" href="http://igorescobar.github.com/jQuery-Mask-Plugin/css/bootstrap.min.css" type="text/css" media="screen">

  <script type="text/javascript" src="http://igorescobar.github.com/jQuery-Mask-Plugin/jquery.mask.js"></script>
</head>
<body>
  <div class="container">
  <h2>Nova mascara para telefones de São Paulo com jQuery Mask Plugin</h1>
  <span> A jQuery Plugin for field masks. </span>
  <h2>Demos</h2>

  <form>
    <label>Mascara para Telefones de São Paulo</label>
    <input type="text" class="sao_paulo_phone_number"/>
  </form>
  
  <p>jQuery Mask Plugin on <a href="https://github.com/igorescobar/jQuery-Mask-Plugin" target="_blank">GitHub</a> & Author <a href="http://blog.igorescobar.com/" rel="author" target="_blank">Igor Escobar</a> </p>
</div>
<br clear="all" />

</div>
</body>
</html>

JavaScript

$(function() {
    var mask_field = $('.sao_paulo_phone_number'),
        options =  {onKeyPress: function(phone){
        if(/^\(11\) 9/i.test(phone))
          mask_field.mask('(00) 00000-0000', options);
        else
          mask_field.mask('(00) 0000-0000', options);         
    }};

    mask_field.mask('(00) 0000-0000', options);
});