admin管理员组文章数量:1332345
I have been looking around and can't seem to find an way to do this. As a user inputs a number into a input field e.g:
<input type="text" class="numberOnly" id="miles" value="" />
How can I get that to update as they are typing to something like. e.g:
Input: 100000
Output: 100,000
I have some similar code that formats some other things as I calculate them, here is the function I'm using to format my other numbers.
function format_num(number) {
number += '';
x = number.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
This works fine, like I said I'm not sure how to put the users input value into this and get the output back into the input field while they are typing.
Note: I need to format more then 1 input field.
Update:
I have this in my code that will trigger each time the keyboard is pressed, so that can be used. This is used for the whole form so the form updates each time a button is pressed.
$(".numberOnly").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 46 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut(1600);
return false;
} else {
$('input').keyup(function () {
});
}
});
Update 2:
Is it possible to make an kind of overlay for it, e.g: the value of the input is 1000 but the overlay shows it to the use as 1,000?
Any help would be great guys. Many thanks!
I have been looking around and can't seem to find an way to do this. As a user inputs a number into a input field e.g:
<input type="text" class="numberOnly" id="miles" value="" />
How can I get that to update as they are typing to something like. e.g:
Input: 100000
Output: 100,000
I have some similar code that formats some other things as I calculate them, here is the function I'm using to format my other numbers.
function format_num(number) {
number += '';
x = number.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
This works fine, like I said I'm not sure how to put the users input value into this and get the output back into the input field while they are typing.
Note: I need to format more then 1 input field.
Update:
I have this in my code that will trigger each time the keyboard is pressed, so that can be used. This is used for the whole form so the form updates each time a button is pressed.
$(".numberOnly").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 46 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut(1600);
return false;
} else {
$('input').keyup(function () {
});
}
});
Update 2:
Is it possible to make an kind of overlay for it, e.g: the value of the input is 1000 but the overlay shows it to the use as 1,000?
Any help would be great guys. Many thanks!
Share Improve this question edited Oct 1, 2013 at 10:34 Ruddy asked Oct 1, 2013 at 9:56 RuddyRuddy 9,9235 gold badges48 silver badges68 bronze badges 3- possible duplicate of How can I format numbers as money in JavaScript? – Konsole Commented Oct 1, 2013 at 9:59
- 1 Why would you do that? It would be very confusing to the user. It would be more useful to accept different input formats. Make sure you are solving the right problem (and solving a problem rather than creating one). – Jukka K. Korpela Commented Oct 1, 2013 at 10:16
- 1 The numbers on the form im making are very big, and the form is very simple. It would make it easier for the user in this case to see the number they have typed formatted. – Ruddy Commented Oct 1, 2013 at 10:17
2 Answers
Reset to default 2Try with onkeypress event. Check this
<input type="text" class="numberOnly" id="miles" value="" onkeypress="format_num(id)" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function format_num(id) {
var number = document.getElementById(id).value;
number += '';
number = number.replace(",","");
x = number.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
document.getElementById(id).value = x1 + x2;
}
//-->
</SCRIPT>
Good question. I had to deal with a similar problem in the past (in my case there were floating point numbers with two decimal points, so I had to keep track of the decimal point). Could not find any decent out of the box solution at the time. What I ended up doing was similar to your approach. However, instead of showing an error message you can edit the input value on the fly: detect unwanted characters and remove them from the string
$myInput.val(filterUnwantedCharacters($myInput.val()))
One problem here is that some browsers will reset the caret position to zero once you do this, so you may want to keep track of the caret position and set it after setting the input value. You may find this useful: http://www.examplet/jquery/caret.php
Also, you may want to format your input on keydown
rather than keypress
, would feel more natural for the user.
Not the easiest task, but with a bit of patience you can build a pretty decent formatter. Good luck!
本文标签: javascriptFormat numbers on inputStack Overflow
版权声明:本文标题:javascript - Format numbers on input - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742246744a2439994.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论