0
348
Views¿Cómo puedo mostrar el nombre del país, la bandera del país y el código del país usando el menú desplegable del país basado en IP?
Estoy tratando de generar el campo de entrada del teléfono y tengo éxito.
Requisito 1: es necesario mostrar la bandera del país junto con el nombre del país tan pronto como aparezca el requisito 2 del menú desplegable: una vez que se seleccione el país, se mostrará el código del país en el siguiente archivo de texto.
la salida seria asi:
$("#mobile-number").intlTelInput({ initialCountry: "auto", 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.9/js/utils.js" // just for formatting/placeholders etc }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://www.jquery-az.com/jquery/js/intlTelInput/intlTelInput.js"></script> <link href="https://www.jquery-az.com/jquery/css/intlTelInput/demo.css" rel="stylesheet" /> <link href="https://www.jquery-az.com/jquery/css/intlTelInput/intlTelInput.css" rel="stylesheet" /> <h1>A demo with IP lookup</h1> <form style="margin-left:150px;"> <input type="tel" id="mobile-number" placeholder="eg +1 702 123 4567"> </form>
·
Juan Pablo Isaza
1 answers
Answer question0
Intento con jQuery.
$("#mobile-number").intlTelInput({ initialCountry: "auto", geoIpLookup: function(callback) { $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; callback(countryCode); init(); }); }, utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js" // just for formatting/placeholders etc }); function init() { $(".selected-flag").css("width", "150px"); $(".selected-flag").append($("<div id='country-name'>"+name+"</div>").css({ "position": "absolute", "top": "0", "bottom": "0", "right": "0", "width": "100", "display": "flex", "align-items": "center", "overflow": "hidden", "white-space": "nowrap" })); $("#mobile-number").css({"padding-left":"150px", "width":"300px"}); showCountryAndCode(); }; $(".country-list li").click(function() { showCountryAndCode(); }); function showCountryAndCode() { setTimeout(() => { let name = $("li.active span.country-name").text(); name = name.indexOf('(') > 0 ? name.substr(0, name.indexOf('(') - 1) : name; const code = $("li.active span.dial-code").text(); $("#country-name").text(name); $("#mobile-number").val(code+" "); }, 0); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://www.jquery-az.com/jquery/js/intlTelInput/intlTelInput.js"></script> <link href="https://www.jquery-az.com/jquery/css/intlTelInput/demo.css" rel="stylesheet" /> <link href="https://www.jquery-az.com/jquery/css/intlTelInput/intlTelInput.css" rel="stylesheet" /> <h1>A demo with IP lookup</h1> <form style="margin-left:150px;"> <input type="tel" id="mobile-number" placeholder="eg +1 702 123 4567"> </form>Deseo que esto te ayude.
·
Juan Pablo Isaza
Report
Answer question