InitTelInput — 如何设置输入中的正确填充？

Question

我在我的项目中使用InitTelInput。

如果我初始化这个库，一切都会很好。

<input type="tel" class="form__tel-input" id="phone" placeholder="">

.form__tel-input {
    position: relative;
    width: 100%;
    padding: 24.5px 24px 25.5px 126px;
    font-family: Lato;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 170%;
    background: #EEEEEE;
    border-radius: 10px;
}

$(() => {
    $('#phone').intlTelInput({
        hiddenInput: 'full_number',
        initialCountry: 'auto',
        geoIpLookup: function (callback) {
            $.get('https://api.sypexgeo.net/json/', function (location) {
                let countryCode = location.country.iso;
                callback(countryCode);
            })
        },
        separateDialCode: true,
    });
})

https://codepen.io/ivstepin/pen/JjJbRrd?editors=1111

但是如果我为 .iti__flag-container 添加填充，则国家/地区选择器会与输入重叠。

.iti__flag-container {
  padding: 16px;
}

https://codepen.io/ivstepin/pen/NWgbRLB?editors=1111

如何为输入进行正确的填充？

Answer 1

使用此 css 正确设置输入样式

.iti__flag-container {
    margin: 16px;
    position: relative;
}

.iti {
    display: flex;
    justify-content: center;
    flex-direction: row;
    border: 2px solid;
    border-radius: 10px;
    background: #EEEEEE;
}

.form__tel-input {
    position: relative;
    width: 100%;
    padding: 24.5px 24px 25.5px 166px;
    font-family: Lato;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 170%;
    background: #EEEEEE;
    border-radius: 10px;
    padding-left: 0px !important;
    border: 0px !important;
    outline: none;
}

您可以在代码窗格此处查看实际情况

Answer 2

您可以尝试在页面完全加载后运行js，以避免CSS问题，并在代码中添加js库。

window.onload = function() {
  // Function to load a script and return a promise
  function loadScript(src) {
    return new Promise(function(resolve, reject) {
      var script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }

  // Load both scripts sequentially or in parallel
  Promise.all([
    loadScript("{{ asset('vendor') }}/intltelinput/build/js/intlTelInput.js"),
    loadScript("{{ asset('vendor') }}/intltelinput/build/js/utils.js")
  ]).then(function() {
    console.log("Both scripts loaded");

    // Execute your code after both scripts are loaded
    setTimeout(() => {
      if ($('#client_phone').length > 0) {
        custom_client_phone_iti = initPhone('client_phone');
      }

      // Uncomment if you need to initialize another phone input
      // initPhone('phone_driver');

    }, 4000);
  }).catch(function(error) {
    console.error("Error loading scripts:", error);
  });
};