Javascript 如何在输入数字时在数字输入字段中添加破折号？_Javascript_Html

Javascript 如何在输入数字时在数字输入字段中添加破折号？

javascript html

Javascript 如何在输入数字时在数字输入字段中添加破折号？,javascript,html,Javascript,Html,我正在尝试使用java脚本在输入时在html数字字段的每个第4位插入破折号。我在模糊中这样做，而不是在按键、向上键等。但是当我尝试将函数更改为on key press/on key up事件时，它并没有给出预期的结果这是我使用的代码 <html> <head> <script> function addDashes(f) { f.value = f.value.slice(0,4)+"-"+f.value.slice(4,8)+"-"+f.valu

我正在尝试使用java脚本在输入时在html数字字段的每个

第4位插入破折号。我在模糊中这样做，而不是在按键、向上键等。但是当我尝试将函数更改为on key press/on key up
事件时，它并没有给出预期的结果
这是我使用的代码
<html>
<head>
<script>
 function addDashes(f)
 {
   f.value = f.value.slice(0,4)+"-"+f.value.slice(4,8)+"-"+f.value.slice(8,12);
 }
</script>
</head>
  <body>
     Phone: <input type='text' name='phone' onblur='addDashes(this)' maxlength='12'><BR>
  </body>
</html>


函数addDashes（f）
{
f、 value=f.value.slice（0,4）+“-”+f.value.slice（4,8）+“-”+f.value.slice（8,12）；
}
电话：


我是“JavaScript”的初学者。我哪里做错了？给你的文本框一个ID，不需要模糊函数，只要把它写在你的document.ready函数中即可。
您的HTML行：
<input type='text' id="txtPhoneNo" name='phone' maxlength='12'><BR>

希望它能对您有所帮助。
这会有用的。它还支持“删除”编号
但是，我建议您使用

$（文档）.ready（函数（）{
$（“#txtPhoneNo”）.keyup（函数（e）{
if（$（this）.val（）.length==14）返回；
如果（e.keyCode==8 | e.keyCode==37 | e.keyCode==39）返回；
让newStr=''；
让groups=$（this.val（）.split（'-'）；
for（让我分组）{
if（组[i]。长度%4==0）{
newStr+=组[i]+“-”
}否则{
newStr+=组[i]；
}
}
$（this.val）（newStr）；
});
})


普通javascript格式副本的部分灵感来自Naman的代码，还有一些其他功能，如删除和退格支持
HTML:
“预期结果”是什么？如果我输入了1234567890012，那么结果应该是1234-5678-9012。如果用户决定修改早期部分（比如他们键入了所有内容，并意识到他们错过了第二个数字），这将不起作用。他们也没有对jQuery说什么，所以我认为一个香草的解决方案是更好的。它正在工作。但是当我试图删除中间的一个数字时，它变得杂乱无章。我们能做些什么吗？还有另一件事，这个字段的最大长度属性是在另一个意义上被取的。连字符也算是一个查理器。应在最大长度中排除连字符。对于长度，您可以使用连字符进行计数，并将其设置为文本框maxlength like，而不是12。将其设置为19。关于删除任何要删除的元素，请使用箭头键（）转到该位置然后你可以改变这个元素，就像你不想使用掩蔽，你想使用这个代码一样。如果你同意这个，那么你能不能请你投票并将其标记为答案。用bug fixmasking更新是一个更好的选择如果你从字段中删除一个中间元素，我认为这会破坏模式。当你从中间删除时，它会变成4-3-4，而不是4-4-4。我更喜欢你在window.onload函数中的第一个解决方案。它在我。@KailashPK您同意使用“掩蔽”还是只想使用Jquery解决问题？@myke_11j现在掩蔽不是我的首要任务，我想使用Jquery解决问题。谢谢您的提问。。
$(document).ready(function () {
    $("#txtPhoneNo").keyup(function () {
                    if ($(this).val().length == 4) {
                        $(this).val($(this).val() + "-");
                    }
                    else if ($(this).val().length == 9) {
                        $(this).val($(this).val() + "-");
                    }
                    else if ($(this).val().length == 14) {
                        $(this).val($(this).val() + "-");
                    }
                });
});

<input type="tel" id="phone">

const phone = document.getElementById('phone');

phone.addEventListener("keydown", (e) => {
    if(e.key === "Backspace" || e.key === "Delete") return;
    if(e.target.value.length === 4) {
        phone.value = phone.value + "-";
    }
    if(e.target.value.length === 9) 
        phone.value = phone.value + "-";
    }
    if(e.target.value.length === 14) {
        phone.value = phone.value + "-";
    }
})