Question

我在页面加载时使用来自API调用的数据填充电话输入字段。

我有一个格式化电话号码的功能： +1（888）333 4444 。但该功能仅在存在键盘事件时才起作用。我试图让这个预先填充的输入值用这个相同的函数格式化。我已经尝试将事件从keyup更改为load，onload，但它没有任何影响。我尝试在setTimeout延迟中包装函数，但这也不起作用。

我知道我错过了一些简单的事情......

<!DOCTYPE html>
<html>
  <body>
    <form>
      <label>Telephone</label>
      <input type="tel" onload="phoneMask()" value="<?= data.phone ?>"/>
    </form>

  <script>
  //Format telephone numbers
  function phoneMask() { 
      var num = $(this).val().replace(/\D/g,''); 
      $(this).val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18)); 
  }; 
  $('[type="tel"]').keyup(phoneMask)
  </script>
  </body>
</html>

Answer 1

在页面底部的脚本部分添加：

  function phoneMask() { 
    var num = $("input[type=tel]").val().replace(/\D/g,''); 
  $("input[type=tel]").val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18));
  };

$(document).ready(function() {
    phoneMask();
} );

我已经编辑了你的phoneMask功能。这将在页面加载后调用phoneMask函数。

这假设只有一个tel类型的盒子。否则，你需要将每个代码中的代码包装在phoneMask中，每个都使用选择器。

如何格式化预填充的输入字段

1 个答案: