我有一个基本的 HTML 输入字段(用于电话号码),当前允许用户在其中输入并提交他们想要的任何内容:
923-98-Ilovekittens :3
但是,我希望该字段看起来像这样:
+1 (___)-___-____
当用户输入 0-9 的数字时,我希望填补这些空白:
+1 (748)-55_-____
如何使用 Javascript(如果更简单,可以使用 Javascript 库)来完成此任务?
我想你可以使用一些输入掩码库,比如这个:https://imask.js.org/.
他们页面上的第三个示例可能适合您。
您可以通过在 HTML 文件中包含
Inputmask
库来使用像 Inputmask
这样的输入掩码库
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.6- beta.0/jquery.inputmask.min.js"></script>
并将输入掩码应用到输入字段
<input type="text" id="phone" placeholder="+1 (___)-___-____">
<script>
$(document).ready(function(){
$("#phone").inputmask("+1 (999) 999-9999");
});
</script>