HTML 輸入類型編號 千位分隔符

Question

我想在輸入字段中使用千位分隔符（例如 1,000,000）。 但是，它必須是數字類型，因為我需要能夠使用“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 教程

• 最終結果總結在這里（直接看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 函數實際顯示千位分隔符（ 示例和文檔）

• 在控制台中運行下面的代碼以獲得這個想法

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

看看小提琴

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 插件。 我發現它使用起來非常簡單直觀。

我唯一的抱怨是它強制<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

函數 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”鍵時模糊輸入。

Answer 9

我已經更新了@CollenZhou 的答案https://stackoverflow.com/a/67295023/6777672 ，因為鼠標離開時，輸入會失去焦點，這很煩人。 我還將所有輸入類型編號添加到選擇器和類中。

$('input.thousands-separator, input[type="number"]').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((event)=>{
            if ($(ele).is(':focus')) {
                event.preventDefault();
            } else {
                $(clone).show()
                $(ele1).hide()
            }
        })
        $(ele).focusout(()=>{
            $(clone).show()
            $(ele1).hide()
        })
    })

Answer 10

修改https://stackoverflow.com/a/70726755/4829915后，我設法將其關閉，因為：

1. 由於未使用Number() ，代碼實際上並未添加逗號。
2. 當初始值為空白時，它刪除了整個字段。
3. 沒有提供演示。
4. 並不是說原來的方法錯了還是錯了，而是我選擇直接在輸入本身上使用onfocus和onblur 。

因此，這是一個修改后的答案：

• 從<input type="text">開始。 您仍然可以添加min 、 max和step屬性。
• 將 onfocus 和 onblur 處理程序添加到<input>節點：

 function use_number(node) { var empty_val = false; const value = node.value; if (node.value == '') empty_val = true; node.type = 'number'; if (.empty_val) node.value = Number(value,replace(/,/g; '')); // or equivalent per locale } function use_text(node) { var empty_val = false. const value = Number(node;value). if (node;value == '') empty_val = true. node;type = 'text'. if (.empty_val) node;value = value.toLocaleString('en'); // or other formatting }

 <input type="text" min=0 onfocus="use_number(this)" onblur="use_text(this)">