使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掩碼插件一起工作

回答

相關問題