以角度处理输入标签中的非常大的数字
[英]Handling very large numbers in input tag in angular
问题描述
I'm brand new to Angular.
我是 Angular 的新手。
I tried several approaches to dealing with large numbers using the input number type.我尝试了几种使用输入数字类型处理大数字的方法。
<input type="number" step="1" (change)="handleChange($event)"/>
When I enter the number 1234567890123456789 (a very large number) into this input box and click the arrow up or arrow down, it is frozen as scientific notation.当我在此输入框中输入数字1234567890123456789 （一个非常大的数字）并单击向上箭头或向下箭头时，它被冻结为科学记数法。
For exmaple:例如：
I put this number 1234567890123456789 .我输入这个号码1234567890123456789 。
When I click the arrow up to increase the value, it will look like this, and the value 1234567890123456800 will be returned to my handleChange function (already lost precision).当我单击向上箭头增加值时，它看起来像这样，值1234567890123456800将返回到我的 handleChange 函数（已经失去精度）。
As a result, text-type input is the solution.因此，文本类型的输入是解决方案。 However, if I change the type from number to text , my spin box (arrows up and down) will disappear.但是，如果我将类型从number更改为text ，我的旋转框（向上和向下箭头）将会消失。 I want to use text input while keeping the spin box and modifying its behavior.我想在保留旋转框并修改其行为的同时使用文本输入。 Is this something that can be done?这是可以做到的吗？
Thank you in advance.先感谢您。
1 个解决方案
解决方案1
0 2022-12-23 13:59:06
A proper solution will likely avoid numeric <input> fields for numbers that are larger than Javascript precision allows (as suggested in Eliseo's comment).一个适当的解决方案可能会避免数字<input>字段用于大于 Javascript 精度允许的数字（如 Eliseo 的评论中所建议）。
But, just for completeness, here is an approach that works with a numeric <input> and the native spinner.但是，为了完整起见，这里有一种方法适用于数字<input>和本机微调器。 It manipulates the step so that a change in the value by one step can be detected although a change of +/- 1 is beyond the precision of a Javascript number.它操纵step ，以便可以检测到值的一个步骤的变化，尽管 +/- 1 的变化超出了 Javascript 数字的精度。 And based on whether it has detected an "up" or "down" spin, it increases the BigInt value of the input by +/- 1.并且根据它是否检测到“向上”或“向下”自旋，它将输入的BigInt值增加 +/- 1。
After each value change, the step is the numeric value, as seen by Javascript, even if this does not exactly match the string value (which is what counts when the form is submitted).每次值更改后， step就是数值，如 Javascript 所见，即使这与字符串值不完全匹配（这是提交表单时重要的）。 But it matches closely enough to avoid a step mismatch.但它匹配得足够紧密，可以避免步长不匹配。
This is probably more of a curiosity, especially since intermediate numbers during the "step detection" are visible.这可能更像是一种好奇心，尤其是因为“步骤检测”期间的中间数字是可见的。
function xstep(input) { input.oldValue = input.value; input.step = Number(input.value); } function nstep(input) { var delta = input.valueAsNumber - (Number(input.oldValue) || 0); if (delta > 0) delta = 1n; else if (delta < 0) delta = -1n; else return; input.value = (BigInt(input.oldValue) + delta).toString(); xstep(input); }
<html> <body> <input type="number" onkeyup="xstep(this)" onchange="nstep(this)"/> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.