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

我想用java脚本在输入时在每个4th数字处插入破折号到一个html数字字段中。我在on-blur而不是on-key-press，on-key-up等这样做了这个。但是当我尝试要将该功能更改为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>

我是'JavaScript'的初学者。我在哪里做错了？

来源

2017-02-11 Kailash PK

什么是'预期结果'？ – lewisjb

如果我输入123456789012，那么结果应该是1234-5678-9012。 –

给你的文本框的ID，不需要模糊功能，只需在你的document.ready函数中写入。你的HTML行：

<input type='text' id="txtPhoneNo" name='phone' maxlength='12'><BR>

您的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() + "-"); 
        } 
       }); 
});

希望它会帮助你。

来源

2017-02-11 06:28:17

如果用户决定修改早期零件（就像他们全部输入并意识到他们错过了第二个数字），这将不起作用。他们也没有提到jQuery，所以我认为香草解决方案是首选。 – lewisjb

它正在工作。但是当我尝试删除中间的数字时，它变得混乱。我们可以做任何事吗？ –

另外还有一点，场的最大长度属性在另一个意义上被采用。连字符也可以算作charechtor。连字符应排除在最大长度。 –

这将工作。它也支持数字的“删除”。

不过，我会用masking

$(document).ready(function() { 
 
    $("#txtPhoneNo").keyup(function (e) { 
 
     if($(this).val().length === 14) return; 
 
     if(e.keyCode === 8 || e.keyCode === 37 || e.keyCode === 39) return; 
 
     let newStr = ''; 
 
     let groups = $(this).val().split('-'); 
 
     for(let i in groups) { 
 
     if (groups[i].length % 4 === 0) { 
 
     newStr += groups[i] + "-" 
 
     } else { 
 
     newStr += groups[i]; 
 
     } 
 
     } 
 
     $(this).val(newStr); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id="txtPhoneNo" name='phone' maxlength='14'><BR>

如果你想使用这种屏蔽的一个片段暗示你，让我知道，我会很乐意提供帮助。

来源

2017-02-11 07:04:03

用错误修复更新 –

掩蔽是一个更好的选择 –

如果从字段中删除中间元素，我认为它会中断该模式。而从4-4-3中删除时，它会变成4-3-4。我更喜欢你的第一个解决方案在window.onload函数中，它对我来说工作得很好。 –

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

回答

相关问题