逗号格式为键入角度

Question

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

默认情况下,逗号已经到位并用下划线分隔.

我想要的是让字段为空,一旦用户开始输入逗号,就应该和F2单元渲染器类似.

因此当输入100时,如果键入10000则应显示100,则应显示10,000

我也在我的应用程序中有角度,因为我们在结合使用jqxwidget所以任何角度方式也很好

我找到的一个插件可以完成这项工作,但是在关注时不要输入 https://www.npmjs.com/package/angular-numeric-directive

Answer 1

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

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

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

演示

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