title: Making intlTelInput and Jquery mask plugins to work together
body: <p>I am trying to add the "mask" feature (from <a href="https://igorescobar.github.io/jQuery-Mask-Plugin/" rel="noreferrer">jquery mask plugin</a>) to the <a href="https://github.com/jackocnr/intl-tel-input" rel="noreferrer">intlTelInput</a> plugin.
   This way, the user input will be "forced" to have the number phone pattern according to the country he selected. </p>
  
  <p>Here is my code for now (which you should be able to run easily as I added online ressources):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Hello&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/css/intlTelInput.css" rel="stylesheet" /&gt;
    &lt;script src="https://code.jquery.com/jquery-1.11.1.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
        &lt;form action="" method="POST" onsubmit="return submitForm(this);"&gt;
  
              &lt;input type="tel"name ="phone1" id="phone1" value="&lt;?php echo $phone1;?&gt;"&gt;
  
              &lt;input type="tel" class="hide" id="hiden"&gt;
  
              &lt;button type="submit"&gt;Validate&lt;/button&gt;
  
        &lt;/form&gt;
  
  
  &lt;/body&gt;
  
  
  
  &lt;script&gt;
  
  /* INITIALIZE BOTH INPUTS WITH THE intlTelInput FEATURE*/
  
  $("#phone1").intlTelInput({
    initialCountry: "us",
    separateDialCode: true,
    preferredCountries: ["fr", "us", "gb"],
    geoIpLookup: function(callback) {
      $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
        var countryCode = (resp &amp;&amp; resp.country) ? resp.country : "";
        callback(countryCode);
      });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
  });
  
  
  $("#hiden").intlTelInput({
    initialCountry: "us",
    dropdownContainer: 'body',
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
  });
  
  
  
  /* ADD A MASK IN PHONE1 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */
  
  var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
  
  $(document).ready(function(){
    $('#phone1').mask(mask1)});
  
  $("#phone1").on("countrychange", function(e, countryData) {
    $("#phone1").val('');
    var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone1').mask(mask1);
  });
  
  
  /*ON SUBMIT...*/
  
  function submitForm(oFormElement)
    {
  
  
    document.getElementById("hiden").value = $("#phone1").val().replace(/\s+/g, ''); // REMOVE ALL THE SPACES OF PHONE1 VALUE
                                                                                     // PUT THE RESULT IN HIDEN INPUT 
                                                                                     // AND TEST THIS LATTER TO SEE IF IT FITS WITH
                                                                                     // the intlTelInput NUMBER FORMAT
  
    //alert($("#hiden").val());
  
  
     // AND IT WILL DISPLAY OK
    if($("#hiden").intlTelInput("isValidNumber")==true){  
      alert("OK");
      return true;
    }
    else{
      alert("NOT OK");
      return false;
    }
  
  }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem here, is that I can't remove the flags dropdown of the hidden field, as you can see:</p>
  
  <p><a href="https://i.stack.imgur.com/6KLrd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6KLrd.png" alt="enter image description here"></a></p>
  
  <p>I tried to add an option called <strong>dropdownContainer</strong> to the initialization of the hidden field. It says in the <a href="https://github.com/jackocnr/intl-tel-input" rel="noreferrer">intltelinput </a> doc that this option with the value 'body' should place the flag dropdown next to the container (in this case: 'body') and if this container has <code>overflow: hidden</code> then the flag would be actually hidden.</p>
  
  <p>But as you can see, it does not work.</p>
  
  <p>Thank you for your attention.</p>
  
  <p><strong>p.s:</strong> </p>
  
  <ol>
  <li>If you change the flag of the "phone1" input, you will have to change the "initialCountry" value manually for the "hiden" input. (I will fix this later).</li>
  <li>I already looked for a plugin with both features (from <strong>jquery mask</strong> and <strong>intlTellInput</strong>), and I did not find, but if you know one, please tell me.</li>
  </ol>