主页 / 问题 / 1516842
Accepted
Denis
Asked:2023-05-01 03:40:00 +0000 UTC2023-05-01 03:40:00 +0000 UTC

输入值时，在从末尾算起的每三个字符后加一个逗号

  • 772

这是 HTML

<input class="rangeInput" type="number" name="range_min" id="range_min" />

在 type="number" 的输入中加载页面时，逗号不代表数字。用户必须只能输入数字和逗号。试图用 JS 来做。

这是JS

$(".rangeInput").each(function() {
  str = $(this).val();
  res = format(str);
  $(this).val(res);
});

function format(str) {
    const s = str.length;
    const chars = str.split('');
    const strWithSpaces = chars.reduceRight((acc, char, i) => {
        const spaceOrNothing = ((((s - i) % 3) === 0) ? ',' : '');
        return (spaceOrNothing + char + acc);
    }, '');
    return ((strWithSpaces[0] === ',') ? strWithSpaces.slice(1) : strWithSpaces);
}

但是输入中的值仍然没有显示。怎么做？

javascript

1 个回答

  1. Best Answer

    我这样做是为了让一个人只能输入一个数字，而不是一个数字和一个逗号。自动添加和删除逗号：

    • 如果字符串中的最后一个字符不是数字，则删除该字符

    • 如果字符串中的最后一个字符是数字，则拆分。逐个字符并删除逗号，因为我将再次手动插入它们

    • 然后我从头开始循环这些字符，但是因为 我改变了这个数组，很难i跟踪，所以我启动了一个计数器k来跟踪我经历了多少个字符，如果我经历了 3 件事，那么我在现在的地方放了一个逗号i：

    const input = document.querySelector('#range_min');

input.addEventListener('input', () => {  
  const value = input.value;
  const lastSymbol = value.at(-1);
  const onlyNumberRegExp = /\d/;
  const delimeter = ',';
  
  if (!onlyNumberRegExp.test(lastSymbol)) {
    input.value = value.slice(0, value.length - 1);
    
    return;
  }
  
  let digitsWithoutComma = value.split('').filter(x => x !== delimeter);
  
  for(let i = digitsWithoutComma.length - 1, k = -2; i > 0; --i, ++k) {
    
    if (k % 3 === 0)
      digitsWithoutComma.splice(i, 0, delimeter);
  }
  
  input.value = digitsWithoutComma.join('');
})
    <input id="range_min" />

    Oliver Patterson提出了这个想法

    您还可以使用Intl.NumberFormat解决此问题

    与之前算法的不同之处在于没有循环：

    const input = document.querySelector('#range_min');

input.addEventListener('input', () => {  
  const value = input.value;
  const lastSymbol = value.at(-1);
  const onlyNumberRegExp = /\d/;
  const delimeter = ',';
  
  if (!onlyNumberRegExp.test(lastSymbol)) {
    input.value = value.slice(0, value.length - 1);
    
    return;
  }
  
  let numberWithoutComma = value.split('').filter(x => x !== delimeter).join('');  
  
  input.value = new Intl.NumberFormat().format(numberWithoutComma);
})
    <input id="range_min" />

    • 2

相关问题