admin管理员组文章数量:1356963
I am trying to use java script to insert dashes into a html number field at every 4th digit while entering.I did this in on-blur instead of on-key-press,on-key-up etc.But when I tried to change the function to on-key-press/on-key-up events it is not giving the expected results.
This is the code which I used.
<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>
I am a beginner in 'JavaScript'. Where am I doing wrong?
I am trying to use java script to insert dashes into a html number field at every 4th digit while entering.I did this in on-blur instead of on-key-press,on-key-up etc.But when I tried to change the function to on-key-press/on-key-up events it is not giving the expected results.
This is the code which I used.
<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>
I am a beginner in 'JavaScript'. Where am I doing wrong?
Share Improve this question edited Feb 11, 2017 at 7:20 Moinuddin Quadri 48.2k13 gold badges100 silver badges133 bronze badges asked Feb 11, 2017 at 6:04 Kailash PKKailash PK 711 gold badge2 silver badges13 bronze badges 2- What are the 'expected results'? – lewisjb Commented Feb 11, 2017 at 6:35
- If I entered 123456789012 then the result should be 1234-5678-9012. – Kailash PK Commented Feb 11, 2017 at 6:46
3 Answers
Reset to default 2This will work. It also supports 'deletion' of number.
However, I would suggest you using 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="txtPhoneNo" name='phone' maxlength='14'><BR>If you want a snippet of this using masking, let me know, I'll be more than happy to help.
Vanilla javascript rendition partially inspired by Naman's code with a few more features like deleting and backspacing support.
HTML:
<input type="tel" id="phone">
Vanilla JS:
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 + "-";
}
})
Give an ID of your textbox and no need of blur function just write this in your document.ready function. Your HTML line:
<input type='text' id="txtPhoneNo" name='phone' maxlength='12'><BR>
Your Jquery line:
$(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() + "-");
}
});
});
hope it will helpful to you.
本文标签： javascriptHow to add dashes into a number input field while entering the numberStack Overflow
版权声明：本文标题：javascript - How to add dashes into a number input field while entering the number? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744001763a2573986.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论