在输入框中输入时将整数转换为货币格式

Posted 2023-04-18

【中文标题】在输入框中输入时将整数转换为货币格式

【英文标题】：Turn integer into money format while typing in an input box

【发布时间】：2012-10-06 12:12:33

【问题描述】：

我会尽量清楚地传达这一点。

我需要一个输入框来读取整数，例如“12345”并将其转换为货币格式，例如：$123.45。这需要在用户键入时进行。

【问题讨论】：

如果需要在用户打字的时候完成，使用js...所以问题不应该被标记为php

所有你需要的都在这里：archive.plugins.jquery.com/plugin-tags/currency

在用户输入时弄乱值是很烦人的。你为什么要这么做？

对不起 PHP 标记，我应该知道的。 RobG，这是我自己的个人项目，所以我现在将是唯一一个搞砸它的人。 JSK NS 我对 javascript 不是很流利，我已经到了那里，但我没有尝试太多，我确实尝试研究过这个并且找不到任何东西。谢谢你的意见。

【参考方案1】：

我创建了一个函数来立即执行此操作（在 keydown 上），以便在您之后执行此操作（keyup 或 blur）时摆脱中间值。它遵循Canadian format，但您可以轻松更改它。

DEMO

它在 IE 中不起作用

$('.numberOnly').on('keydown', function(e)

  if(this.selectionStart || this.selectionStart == 0)
    // selectionStart won't work in IE < 9

    var key = e.which;
    var prevDefault = true;

    var thouSep = " ";  // your seperator for thousands
    var deciSep = ",";  // your seperator for decimals
    var deciNumber = 2; // how many numbers after the comma

    var thouReg = new RegExp(thouSep,"g");
    var deciReg = new RegExp(deciSep,"g");

    function spaceCaretPos(val, cPos)
        /// get the right caret position without the spaces

        if(cPos > 0 && val.substring((cPos-1),cPos) == thouSep)
        cPos = cPos-1;

        if(val.substring(0,cPos).indexOf(thouSep) >= 0)
        cPos = cPos - val.substring(0,cPos).match(thouReg).length;
        

        return cPos;
    

    function spaceFormat(val, pos)
        /// add spaces for thousands

        if(val.indexOf(deciSep) >= 0)
            var comPos = val.indexOf(deciSep);
            var int = val.substring(0,comPos);
            var dec = val.substring(comPos);
         else
            var int = val;
            var dec = "";
        
        var ret = [val, pos];

        if(int.length > 3)

            var newInt = "";
            var spaceIndex = int.length;

            while(spaceIndex > 3)
                spaceIndex = spaceIndex - 3;
                newInt = thouSep+int.substring(spaceIndex,spaceIndex+3)+newInt;
                if(pos > spaceIndex) pos++;
            
            ret = [int.substring(0,spaceIndex) + newInt + dec, pos];
        
        return ret;
    

    $(this).on('keyup', function(ev)

        if(ev.which == 8)
            // reformat the thousands after backspace keyup

            var value = this.value;
            var caretPos = this.selectionStart;

            caretPos = spaceCaretPos(value, caretPos);
            value = value.replace(thouReg, '');

            var newValues = spaceFormat(value, caretPos);
            this.value = newValues[0];
            this.selectionStart = newValues[1];
            this.selectionEnd   = newValues[1];
        
    );

    if((e.ctrlKey && (key == 65 || key == 67 || key == 86 || key == 88 || key == 89 || key == 90)) ||
       (e.shiftKey && key == 9)) // You don't want to disable your shortcuts!
        prevDefault = false;

    if((key < 37 || key > 40) && key != 8 && key != 9 && prevDefault)
        e.preventDefault();

        if(!e.altKey && !e.shiftKey && !e.ctrlKey)

            var value = this.value;
            if((key > 95 && key < 106)||(key > 47 && key < 58) ||
              (deciNumber > 0 && (key == 110 || key == 188 || key == 190)))

                var keys =  // reformat the keyCode
                48: 0, 49: 1, 50: 2, 51: 3,  52: 4,  53: 5,  54: 6,  55: 7,  56: 8,  57: 9,
                96: 0, 97: 1, 98: 2, 99: 3, 100: 4, 101: 5, 102: 6, 103: 7, 104: 8, 105: 9,
                110: deciSep, 188: deciSep, 190: deciSep
                ;

                var caretPos = this.selectionStart;
                var caretEnd = this.selectionEnd;

                if(caretPos != caretEnd) // remove selected text
                value = value.substring(0,caretPos) + value.substring(caretEnd);

                caretPos = spaceCaretPos(value, caretPos);

                value = value.replace(thouReg, '');

                var before = value.substring(0,caretPos);
                var after = value.substring(caretPos);
                var newPos = caretPos+1;

                if(keys[key] == deciSep && value.indexOf(deciSep) >= 0)
                    if(before.indexOf(deciSep) >= 0) newPos--; 
                    before = before.replace(deciReg, '');
                    after = after.replace(deciReg, '');
                
                var newValue = before + keys[key] + after;

                if(newValue.substring(0,1) == deciSep)
                    newValue = "0"+newValue;
                    newPos++;
                

                while(newValue.length > 1 && 
                  newValue.substring(0,1) == "0" && newValue.substring(1,2) != deciSep)
                    newValue = newValue.substring(1);
                    newPos--;
                

                if(newValue.indexOf(deciSep) >= 0)
                    var newLength = newValue.indexOf(deciSep)+deciNumber+1;
                    if(newValue.length > newLength)
                    newValue = newValue.substring(0,newLength);
                    
                

                newValues = spaceFormat(newValue, newPos);

                this.value = newValues[0];
                this.selectionStart = newValues[1];
                this.selectionEnd   = newValues[1];
            
        
    

    $(this).on('blur', function(e)

        if(deciNumber > 0)
            var value = this.value;

            var noDec = "";
            for(var i = 0; i < deciNumber; i++)
            noDec += "0";

            if(value == "0"+deciSep+noDec)
            this.value = ""; //<-- put your default value here
            else
            if(value.length > 0)
                if(value.indexOf(deciSep) >= 0)
                    var newLength = value.indexOf(deciSep)+deciNumber+1;
                    if(value.length < newLength)
                    while(value.length < newLength) value = value+"0"; 
                    this.value = value.substring(0,newLength);
                    
                
                else this.value = value + deciSep + noDec;
            
        
    );
  
);

希望对你有帮助！

【参考方案2】：

你可以试试这样的：

<script>
function formatAsDollars(el) 
  el.value = '$' + el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'.$1');

<\script>

<input onkeyup="formatAsDollars(this);">

我觉得这很烦人，其他人也会。

【讨论】：

就像我说的，这只是给我的。此外，它不会像这样在千分位添加逗号：$1,235.41，但它是一个很好的参考点，谢谢！！