Question

我想在输入字段中有一千个分隔符（例如1,000,000）。但是，必须是类型编号，因为我需要能够使用＆＃34; step＆＃34;来调整其值。代码：

<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

试

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 3

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

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

我猜您可以使用低于1,000的预期值作为<input type="number">，并将值超过1,000作为<input type="text">

Answer 4

选中 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();            
    var 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 5

You can fake this functionality by using a pseudo-element to display the comma version.

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

A wrapping div is required because inputs can't have pseudo elements.

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

And a little bit of JavaScript to insert commas every third character

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)
}

Check out the fiddle

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, '')))
        }
    }
})

HTML输入类型编号千位分隔符

7 个答案: