Question

在jqxwidget中 http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnumberinput/index.htm

默认情况下，逗号已经到位，并以下划线分隔。

我想要的是将该字段设置为空，并且一旦用户开始输入逗号，就应该与F2单元格渲染器类似。

所以当输入100时应该显示100 当输入10000时，它应显示10,000

我也在我的应用程序中有角度，因为我们使用jqxwidget进行连接，所以任何角度方式也很好

我找到的一个插件可以完成这项工作，但是当你在打字时没有注意到它时 https://www.npmjs.com/package/angular-numeric-directive

Answer 1

嘿我之前通过创建一个将过滤器应用于HTML输入的指令解决了这个问题。这是jsfiddle example

这是指令。它既可以格式化用户的输入，也可以将光标保持在用户输入的位置。我的一个问题是光标应该指向的逻辑。

fessmodule.directive('format', ['$filter', function ($filter) {
return {
    require: '?ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;

        var parts = attrs.format.split(':');
        attrs.foramtType = parts[0];
        attrs.pass = parts[1];

        ctrl.$formatters.unshift(function (a) {
            return $filter(attrs.foramtType)(ctrl.$modelValue, attrs.pass)
        });


        ctrl.$parsers.unshift(function (viewValue) {
            var cursorPointer = elem.context.selectionStart;
            var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter(attrs.foramtType)(plainNumber, attrs.pass));
            elem.context.setSelectionRange(cursorPointer, cursorPointer);
            return plainNumber;
        });

    }
};

用HTML激活它

<input type="text" ng-model="test" format="number:2" />

Answer 2

Angular已经提供了非常基本的格式化过滤器喜欢

html : {{val | number:0}}
script: $scope.val = 1234.56789;

参考：

https://docs.angularjs.org/api/ng/filter/number
https://docs.angularjs.org/api/ng/filter/currency
https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters

Answer 3

Demo

<input value="100000000" id="testInput" />

只需将此.formatInput(numberOfCharactersForSeparator, Separator );应用于您的输入

即可

$(document).ready(function()
{
    $("#testInput").formatInput(3,"," );
});

使用我刚刚制作的插件：p

$.fn.formatInput = (function(afterHowManyCharacter,commaType)
{
    if(afterHowManyCharacter && commaType != ".")
    {
        var str = $(this).val();
        var comma = commaType != undefined ? commaType : "," ;

        var strMod ;
        if($(this).val().indexOf(".") == -1)
            strMod = replaceAll(comma,"",$(this).val());
        else
        {
            strMod = replaceAll(comma,"",$(this).val());
            strMod = strMod.substring(0,strMod.indexOf("."));
        }

        if($(this).val().indexOf(".") != -1)
            $(this).val(splitByLength(strMod,afterHowManyCharacter).join( comma )+  $(this).val().substring($(this).val().indexOf(".")));
        else
            $(this).val(splitByLength(strMod,afterHowManyCharacter).join( comma ));



        var nowPos = 0;
        $(this).on("keyup",function(e)
        {
            nowPos = doGetCaretPosition($(this)[0]);
            var codePressed = e.which ;
            if(" 8 37 38 39 40 46 17".indexOf(" "+codePressed) == -1 && !e.ctrlKey)
            {
                if($(this).val().length >afterHowManyCharacter)
                {
                    strMod ;
                    if($(this).val().indexOf(".") == -1)
                        strMod = replaceAll(comma,"",$(this).val());
                    else
                    {
                        strMod = replaceAll(comma,"",$(this).val());
                        strMod = strMod.substring(0,strMod.indexOf("."));
                    }

                    if($(this).val().indexOf(".") != -1)
                        $(this).val(splitByLength(strMod,afterHowManyCharacter).join( comma )+ $(this).val().substring($(this).val().indexOf(".")));
                    else
                        $(this).val(splitByLength(strMod,afterHowManyCharacter).join( comma ));

                    if((strMod.length-1)%afterHowManyCharacter == 0)
                    {
                        setCursor($(this)[0],nowPos+1);
                    }
                    else
                    {
                        setCursor($(this)[0],nowPos);
                    }
                }
            }
        });

    }
    else if( commaType == ".")
    {
        console.log("You can't use . as Separator");
    }

    function splitByLength(str,maxLength)
    {
        var reg = new RegExp(".{1,"+maxLength+"}","g"); ;
        return reverseStringInArray(str.split("").reverse().join("").match(reg).reverse());
    }

    function replaceAll(find, replace, str) {
      return str.replace(new RegExp(find, 'g'), replace);
    }

    function reverseStringInArray(arr)
    {
        $.each(arr,function(i,val)
        {
            arr[i] = arr[i].split("").reverse().join("");
        });
        return arr ;
    }


    // Author of setCursor is nemisj
    function setCursor(node,pos)
    {
        node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;

        if(!node){
            return false;
        }else if(node.createTextRange){
            var textRange = node.createTextRange();
            textRange.collapse(true);
            textRange.moveEnd(pos);
            textRange.moveStart(pos);
            textRange.select();
            return true;
        }else if(node.setSelectionRange){
            node.setSelectionRange(pos,pos);
            return true;
        }

        return false;
    }

    // Author of setCursor is bezmax
    function doGetCaretPosition (oField) {

      // Initialize
      var iCaretPos = 0;

      // IE Support
      if (document.selection) {

        // Set focus on the element
        oField.focus ();

        // To get cursor position, get empty selection range
        var oSel = document.selection.createRange ();

        // Move selection start to 0 position
        oSel.moveStart ('character', -oField.value.length);

        // The caret position is selection length
        iCaretPos = oSel.text.length;
      }

      // Firefox support
      else if (oField.selectionStart || oField.selectionStart == '0')
        iCaretPos = oField.selectionStart;

      // Return results
      return (iCaretPos);
    }
});

Answer 4

100 =＆gt; 100

1000 =＆gt; 1,000

10000 =＆gt;万

100000 =＆gt; 100,000

...

10000000 =＆gt; 10,000,000

10000000.540 =＆gt; 10,000,000.540

我使用 ng-change 事件制作此示例

ini_set

使用它

// on-change event $scope.ngchanged = function (val) { $scope.iputval = numberWithCommas(val); }; function numberWithCommas(n) { while (n.toString().indexOf(",") != -1) { n = n.replace(",", ""); } var parts = n.toString().split("."); return parts[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); }

通过以下链接
更新了添加演示和代码
完整代码和演示＆gt;＆gt; here

Answer 5

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
    $scope.name = "1232.33";
    $scope.changeFormat = function(value){
        $scope.name = Number(value).toLocaleString('en');
    }
 });
</script>
<body>
    <div ng-app="app" ng-controller="myCtrl">

    <p>Input something in the input box:</p>
    <p>Number: <input type="text" ng-model="name" placeholder="Enter name here" ng-blur="changeFormat(name)"></p>
    <h1>Formatted value {{name}}</h1>

 </div>

 </body>
 </html>

Answer 6

这是一个hackish解决方案。我们的想法是观察输入文本的变化并相应地格式化输入。

<强> HTML

<div ng-controller="so">
  <input ng-model="salary"></input>
</div>

<强>的Javascript

app.controller('so', function($scope) {
$scope.salary = '12567';
$scope.$watch('salary', function(){
    // strip out all the commas and dots
    var temp = $scope.salary;
    if (!temp) return; // ignore empty input box
    var lastChar = temp[temp.length-1];
    if (lastChar === ',' || lastChar === '.') // skip it/allow commas
        return;
    var a = temp.replace(/,/g,'');  //remove all commas
    //console.log(a);
    if (isNaN(a)) 
        $scope.salary = temp.substring(0, temp.length-1); // last char was not right
    else {
        var n = parseInt(a, 10); // the integer part
        var f = ''; // decimal part
        if (a.indexOf('.') >= 0) // decimal present{
            if (lastChar === '0') // 0's after decimal point are OK
                return;
            f = ('' + parseFloat(a)).substr(a.indexOf('.'));
        }
        var formatted_salary = '';
        var count = 0;
        var ns = '' + n; // string of integer part
        for (var i=ns.length-1; i>=0; i--) {
            if (count%3===0 && count>0)
                formatted_salary = ',' + formatted_salary;
            formatted_salary = ns[i] + formatted_salary;
            count += 1;
        }
        formatted_salary = formatted_salary + (f ? f : '');
        $scope.salary = formatted_salary;

    }
})
})

这是JSFiddle 它优雅地处理像

这样的事情

不允许任何除数字以外的字符和。
正确格式化了多个逗号和点

PS： - 您可能希望使用文本范围自己处理插入符号的正确位置。我还没有把它包括在内。

逗号格式为键入角度

6 个答案: