Question

我需要为我的inputBox添加适用于货币的格式，它应该像这样：£000,000.000。

这是我的脚本当前的样子：

var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });

elOrderValue.addEventListener('keyup', _ => {
    let curVal = elOrderValue.value; 

    let curValFloat = parseFloat(curVal);
    if (isNaN(curValFloat)) {
        elDeliveryPrice.innerHTML = '';
        return;
    }

    elDeliveryPrice.innerHTML = formatter.format((curValFloat * 0.025) + 4);
});

Here's what the elements look like。 Check out what it looks like on the live site。该脚本当前在键盘上显示输入的数字值以及添加的公式，以显示相对于单独的div块上的输入值的价格，并且仅在输出上使用货币格式。我如何修改此代码以在用户输入时将格式添加到inputBox？谢谢。

Answer 1

我不是UX专家，但是根据我的经验，我可以告诉你只要光标位于文本字段内，就不要这样做。在用户仍在键入时格式化输入会给用户带来很多挫败感和“怪异”的行为（跳跃的光标，突然出现特殊字符等）。也许可以在输入获得焦点并失去焦点时来回格式化。

但是，无论人们如何看待您的页面及其可用性，都应这样做：将格式化的文本分配给输入的value属性：

var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });

elOrderValue.addEventListener('keyup', _ => {
    let curVal = elOrderValue.value; 

    let curValFloat = parseFloat(curVal);
    if (isNaN(curValFloat)) {
      elDeliveryPrice.innerHTML = '';
      return;
    }

    elOrderValue.value = formatter.format((curValFloat * 0.025) + 4); // <-- this line
});

被警告：肯定会会导致错误/奇怪的行为/任何问题。

键入时inputBox的货币/会计格式

1 个答案: