时间戳

首页 > 解决方案 > 是否可以在不影响输入值的情况下屏蔽 javascript 中的输入？

javascript - 是否可以在不影响输入值的情况下屏蔽 javascript 中的输入？

问题描述

我正在尝试将掩码应用于数字（没有小数的货币格式），但需要能够仅在用户端显示掩码（因为“平面”数字是数学公式的一部分，并且不能使用逗号或点）。

我希望能够在用户端“$253,487”显示类似的内容，并将此信息发送到公式“253487”。

这是我尝试的最后一件事，但当然不起作用：

const number = document.querySelector('.number');

function formatNumber(n) {
  n = String(n).replace(/\D/g, "");
  return n === '' ? n : Number(n).toLocaleString();
}
number.addEventListener('keyup', (e) => {
  const element = e.target;
  const value = element.value;
  element.value = formatNumber(value);

});
<input class="number">
.

标签： javascripthtml

解决方案

你拥有使它起作用的所有成分。可能您需要将当前formatNumber函数分成两个函数，因此您有一个用于获取纯数字（仅限数字），另一个用于格式化。目前该功能正在做这两个。

所以像这样：

const number = document.querySelector('.number');

function getInputValue(inputElement) {
  return parseInt(inputElement.value.replace(/\D/g, ""));
}

function formatInputValue(inputElement) {
  let n = getInputValue(inputElement);
  inputElement.value = Number.isNaN(n) ? "$" : "$" + getInputValue(inputElement).toLocaleString();
}

number.addEventListener('input', (e) => {
  formatInputValue(e.target);
  // Apply a formula
  let n = getInputValue(e.target);
  console.log("squared=" + (n*n)); // output the square
});
<input class="number">

推荐阅读