Question

我需要在表单的第一个输入值中“回显”一个号码电话。

问题在于，当这样做时，标志（应该是您所在国家/地区的标志）不会出现在第一个输入上。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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/intl-tel-input/11.0.14/css/intlTelInput.css">
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

</head>


<?php
  error_reporting(0);

  $phone1="0845124578";

?>

<body>

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

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


            <input type="tel" class="form-control" name ="phone5" id="phone5" value="<?php echo $phone5;?>">

            <button type="submit">valider</button>
      </form>

</body>

</html>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.min.js"></script>

<script>


$("#phone1").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.14/js/utils.js"
});



$("#phone5").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.14/js/utils.js"

});



var telInput1 = $("#phone1"),
telInput5 = $("#phone5"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");

telInput1.intlTelInput({
      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


telInput5.intlTelInput({
      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


</script>

结果如下：

我无法弄清楚这个问题是怎么发生的，有什么帮助？

P.S：

1）您应该能够在不做任何更改的情况下运行此代码（我想提供一个JSFiddle示例，但它不起作用）。

2）对于示例，我没有将调用添加到数据库，但是我直接影响$phone1的值。

Answer 1

我猜您需要确保在设置值之前加载intlTelInput和utilsScript？

flag没有加载intlTelInput库

1 个答案: