使intlTelInput和jquery掩码插件一起工作

我试图将“掩码”功能（从jquery mask plugin）添加到intlTelInput插件。这样，用户输入将被“强制”，以根据他选择的国家具有号码电话模式。使intlTelInput和jquery掩码插件一起工作

这里是我的代码现在（你应该能够很容易地运行，因为我加入在线ressources）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Hello</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/css/intlTelInput.css" rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script> 

</head> 


<body> 

     <form action="" method="POST" onsubmit="return submitForm(this);"> 

      <input type="tel"name ="phone1" id="phone1" value="<?php echo $phone1;?>"> 

      <input type="tel" class="hide" id="hiden"> 

      <button type="submit">Validate</button> 

     </form> 


</body> 



<script> 

/* 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 && 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; 
    } 

} 


</script>

这里的问题是，我不能删除隐藏的标志下拉现场，你可以看到：

我想补充一个选项叫做dropdownContainer的隐藏字段的初始化。它在intltelinput文档中说，具有值“body”的这个选项应该在容器旁边放置标志下拉（在本例中为'body'），如果这个容器有overflow: hidden那么标志实际上是隐藏的。

但是，正如你所看到的，它不起作用。

感谢您的关注。

P.S：

如果你改变了“PHONE1”输入的标志，你必须手动更改“initialCountry”值了“隐伏”输入。（我稍后会解决这个问题）。
我已经找了一个插件，这两个功能（从jquery mask和intlTellInput），我没有找到，但如果你知道一个，请告诉我。

来源

2017-06-14 ThisIsMe

你可以选择输入元素与jQuery，并隐藏其父。作品在我的例子：需要

代码：$('input.hide').parent().hide();

请注意你可能会需要一个更好的类，然后hide，因为用我的确切的方法会导致副作用，如果你隐藏其他输入字段。改为尝试像hide-parent这样的课程。我刚用过这个，因为它在你的例子中有效。

例子：

/* 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 && 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; 
 
    } 
 

 
} 
 

 
$('input.hide').parent().hide();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/css/intlTelInput.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script> 
 

 

 
<form action="" method="POST" onsubmit="return submitForm(this);"> 
 

 
    <input type="tel"name ="phone1" id="phone1" value="<?php echo $phone1;?>"> 
 

 
    <input type="tel" class="hide" id="hiden"> 
 

 
    <button type="submit">Validate</button> 
 

 
</form>

来源

2017-06-14 10:13:31 Randy

非常感谢，它的工作！ – ThisIsMe

优秀:)谢谢！ –

使intlTelInput和jquery掩码插件一起工作

回答

相关问题