HTML 输入类型数字千位分隔符

Question

我想在我的输入字段中有千位分隔符（例如 1,000,000）。但是，它必须是 number 类型，因为我需要能够使用“step”来调整它的值。代码：

<input type="number" id='myNumber' value="40,000" step='100'>

我尝试使用 Javascript 来调整该值，但没有奏效。任何帮助，将不胜感激。谢谢！

Answer 1

使用 autoNumeric 插件，您可以将字段设置为具有不同分隔符的数字输入。

包含插件：

<script src="~/Scripts/autoNumeric/autoNumeric.min.js" type="text/javascript"></script>

HTML：

 <input type="text" id="DEMO" data-a-sign="" data-a-dec="," data-a-sep="." class="form-control"> 

脚本：

<script>
 jQuery(function($) {
$('#DEMO').autoNumeric('init');   
 });
</script>

您只能输入数字，如果输入 100000,99，您将看到 100.000,99。

更多：https://github.com/autoNumeric/autoNumeric

Answer 2

• 检查此 webdesign.tutsplus.com tutorial

• 最终结果总结在这里（看direct Codepen playground）

  $("#formInput".on("keyup", function(event ) {                   
      // When user select text in the document, also abort.
      var selection = window.getSelection().toString(); 
      if (selection !== '') {
          return; 
      }       
      // When the arrow keys are pressed, abort.
      if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) {
          return; 
      }       
      var $this = $(this);            
      // Get the value.
      var input = $this.val();            
      input = input.replace(/[\D\s\._\-]+/g, ""); 
      input = input?parseInt(input, 10):0; 
      $this.val(function () {
          return (input === 0)?"":input.toLocaleString("en-US"); 
      }); 
  }); 
  

注意事项：

• toLocaleString() javascript 函数实际显示千位分隔符 (example and doc)

• 在您的控制台中运行以下代码以获取想法

  (30000000).toLocaleString('en-US',{useGrouping:true})

Answer 3

您可以通过使用伪元素来显示逗号版本来伪造此功能。

div[comma-value]{
  position:relative;
}
div[comma-value]:before{
  content: attr(comma-value);
  position:absolute;
  left:0;
}
div[comma-value] input{
  color:#fff;
}

需要一个包装 div，因为输入不能有伪元素。

<div>
  <input type="number" id='myNumber' value="40000" step='100'>
</div>

还有一点 JavaScript 可以每隔三个字符插入逗号

myNumber.value = commify(myNumber.value)
myNumber.addEventListener("change", function(){
  commify(event.target.value)
})

function commify(value){
  var chars = value.split("").reverse()
  var withCommas = []
  for(var i = 1; i <= chars.length; i++ ){
    withCommas.push(chars[i-1])
    if(i%3==0 && i != chars.length ){  
      withCommas.push(",")
    }
  }
  var val = withCommas.reverse().join("")
  myNumber.parentNode.setAttribute("comma-value",val)
}

查看fiddle

Answer 4

试试

function addCommas(nStr)
{
    nStr += '';
    x = nStr.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;
}

Answer 5

csq 建议使用jQuery autoNumeric plugin。我发现它使用起来非常简单直观。

我唯一的抱怨是它强制<input type="text"> 而不是<input type="number">。这意味着您将失去 step 的功能，但您的网站用户可以在字段中使用逗号。

我猜您可以将小于 1,000 的预期值用作 <input type="number">，将大于 1,000 的值用作 <input type="text">

Answer 6

创建一个显示格式化数字的掩码输入。此解决方案避免更改输入的类型或值。

$("input.mask").each((i,ele)=>{
            let clone=$(ele).clone(false)
            clone.attr("type","text")
            let ele1=$(ele)
            clone.val(Number(ele1.val()).toLocaleString("en"))
            $(ele).after(clone)
            $(ele).hide()
            clone.mouseenter(()=>{

                ele1.show()
                clone.hide()
            })
            setInterval(()=>{
                let newv=Number(ele1.val()).toLocaleString("en")
                if(clone.val()!=newv){
                    clone.val(newv)
                }
            },10)

            $(ele).mouseleave(()=>{
                $(clone).show()
                $(ele1).hide()
            })
            

        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="mask" type="number" value="12345.678"/>

Answer 7

function addCommas(nStr) { ....

除了 yovanny 的回答之外，我还创建了一个使用此功能的 Vue 组件。

    Vue.component("in-n", {
    template:
        `<input @keyup="keyup" @keypress="isNumber($event)" v-model="text" type="text" />`,
    props: ["value"],
    data() {
        return {
            text: ""
        }
    },
    methods: {
        addCommas(nStr) {
            nStr += '';
            x = nStr.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;
        },
        isNumber: function (evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                evt.preventDefault();;
            } else {
                return true;
            }
        },
        keyup() {
            this.text = this.addCommas(this.text.replace(/,/g, ''));
            this.$emit("input", parseInt(this.text.replace(/,/g, '')))
        }
    }
})

Answer 8

我找到了一个更简单的答案：

• 以<input type="text"> 开头。您仍然可以添加 min、max 和 step 属性。
• 将 onfocus 和 onblur 处理程序添加到 <input> 节点：

node.addEventListener('onfocus', () => {
  const value = node.value;
  node.type = 'number';
  node.value = Number(value.replace(/,/g, '')); // or equivalent per locale
});

node.addEventListener('onblur', () => {
  const value = node.value;
  node.type = 'text';
  node.value = value.toLocaleString();  // or other formatting
});

当用户选择输入时，它将转换为删除了千位分隔符的常规数字输入，但带有一个普通的微调器。当用户模糊输入时，它会恢复为格式化文本。

我添加了一个 onkeyup 处理程序，它会在按下“enter”键时模糊输入。