0

我有一个带有电话号码的 simple_form。我正在使用 Intl-Tel-Input 获取整个 phone_number 并确认不同国家/地区的 SMS（twilio）。在 console.log 中，我成功显示了整个数字。当我提交时，我只得到没有国家指示符的电话号码（dial_code）

我阅读了文档，尝试通过其他方式（.value、.data 等）获取它，但无法保存整个 phone_number（例如，+33612345678，我只得到 61234567）。

这是我的代码：

    <div class="userphonenumber">
      <%= f.input :phone_number, label: 'N° de téléphone', required: true, autofocus: true ,
      input_html: { autocomplete: "intlNumber" }, wrapper_html: { id: 'userphonenumber' }%>
    </div>

<script>
  $("#user_phone_number").intlTelInput({
    formatOnInit: true,
    separateDialCode: true,
    onlyCountries: ['fr', 'at', 'be', 'bg', 'cz', 'dk', 'de', 'ee', 'ie', 'el', 'es', 'hr', 'it', 'cy', 'lv', 'lt', 'lu', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro', 'si', 'sk', 'fi', 'se', 'uk'],
    initialCountry: "fr"
  });

  const flag = document.querySelector(".flag-container")
  flag.addEventListener("click", () => {
  var intlNumber = $("#user_phone_number").intlTelInput("getNumber");
  console.log("intlNumber", intlNumber)

  var input = document.querySelector("#user_phone_number");
  window.intlTelInput(input);

  });
</script>

我期待 +33612345678 将 phone_number 与 twilio 一起使用。RoR 和 JS 的初学者。我错过了什么 ？谢谢你的帮助。

4

1 回答 1

0

最后用这个解决方案修复：

<script>
  $("#user_phone_number").intlTelInput({
    formatOnInit: true,
    separateDialCode: true,
    onlyCountries: ['at', 'be', 'bg', 'cz', 'dk', 'de', 'ee', 'ie', 'el', 'es', 'fr', 'hr', 'it', 'cy', 'lv', 'lt', 'lu', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro', 'si', 'sk', 'fi', 'se', 'uk'],
    initialCountry: "fr",
  });

  var phone = document.getElementById('user_phone_number')
  phone.addEventListener('keyup', (event) => {
    console.log(event)
  });

  $("form").submit(function() {
  $('#user_phone_number').val($(phone).intlTelInput("getNumber"));
  });
</script>
于 2019-07-07T08:56:50.840 回答