AngularJS数字输入格式化视图

Question

我想使用格式化数字输入来向用户显示千位分隔点,当他输入大数字时.这是我使用的指令代码:http://jsfiddle.net/LCZfd/3/

当我使用input type="text"它时,但是当我想使用input type="number"它时,当用户输入大数字时,它会被某些东西清理掉.

有什么问题input[number]？

Answer 1

如注释中所写,input type="number"除了数字,小数点分隔符(通常,或.取决于语言环境)和-或之外,不支持任何内容e.您仍然可以输入任何内容,但浏览器将丢弃任何未知/不正确的字符.

这为您提供了两个选项:

• 使用type="text"和模式验证,如pattern="[0-9]+([\.,][0-9]+)*"限制用户可以输入的内容,同时自动格式化值,就像在示例中一样
• 在输入变量顶部放置一个叠加层,可以根据需要呈现数字,并且仍允许用户使用自定义type="number"输入控件,如此处所示

后一种解决方案使用<label>包含当前值的附加标记,并在聚焦输入字段时通过CSS隐藏.

Answer 2

您需要将step属性添加到number输入中.

<input type="number" step="0.01" />

这将允许浮点数.

http://jsfiddle.net/LCZfd/1/

另外,我建议number在Firefox中查看输入中的bug线程.您可能想要考虑不使用此输入类型,因为它在此版本的FF中最终得到支持.

• https://bugzilla.mozilla.org/show_bug.cgi?id=344616
• http://caniuse.com/input-number

Answer 3

这些年后,仍然没有开箱即用的HTML5解决方案.

我正在使用<input type="tel">或<input type="text">("tel"在Android和iOS中调出数字键盘,在某些情况下是奖励.)

然后我需要一个指令:

• 过滤掉非数字字符
• 添加千位分隔符逗号作为用户类型
• 使用$parsers和keyup设置elem.val()和$formatters设置显示...
• ...在幕后,指定ng-model一个浮点数

下面的指令示例执行此操作,除非您指定只需要正数或整数,否则它接受负数和浮点数.

这不是我想要的完整解决方案,但我认为它填补了这一空白.

HTML

<input type="text" ng-model="someNumber" number-input />

JAVASCRIPT

myApp.directive('numberInput', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {

      ngModelCtrl.$formatters.push(function(modelValue) {
        return setDisplayNumber(modelValue, true);
      });

      // it's best to change the displayed text using elem.val() rather than
      // ngModelCtrl.$setViewValue because the latter will re-trigger the parser
      // and not necessarily in the correct order with the changed value last.
      // see http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/
      // for an explanation of how ngModelCtrl works.
      ngModelCtrl.$parsers.push(function(viewValue) {
        setDisplayNumber(viewValue);
        return setModelNumber(viewValue);
      });

      // occasionally the parser chain doesn't run (when the user repeatedly 
      // types the same non-numeric character)
      // for these cases, clean up again half a second later using "keyup"
      // (the parser runs much sooner than keyup, so it's better UX to also do it within parser
      // to give the feeling that the comma is added as they type)
      elem.bind('keyup focus', function() {
        setDisplayNumber(elem.val());
      });

      function setDisplayNumber(val, formatter) {
        var valStr, displayValue;

        if (typeof val === 'undefined') {
          return 0;
        }

        valStr = val.toString();
        displayValue = valStr.replace(/,/g, '').replace(/[A-Za-z]/g, '');
        displayValue = parseFloat(displayValue);
        displayValue = (!isNaN(displayValue)) ? displayValue.toString() : '';

        // handle leading character -/0
        if (valStr.length === 1 && valStr[0] === '-') {
          displayValue = valStr[0];
        } else if (valStr.length === 1 && valStr[0] === '0') {
          displayValue = '';
        } else {
          displayValue = $filter('number')(displayValue);
        }

        // handle decimal
        if (!attrs.integer) {
          if (displayValue.indexOf('.') === -1) {
            if (valStr.slice(-1) === '.') {
              displayValue += '.';
            } else if (valStr.slice(-2) === '.0') {
              displayValue += '.0';
            } else if (valStr.slice(-3) === '.00') {
              displayValue += '.00';
            }
          } // handle last character 0 after decimal and another number
          else {
            if (valStr.slice(-1) === '0') {
              displayValue += '0';
            }
          }
        }

        if (attrs.positive && displayValue[0] === '-') {
          displayValue = displayValue.substring(1);
        }

        if (typeof formatter !== 'undefined') {
          return (displayValue === '') ? 0 : displayValue;
        } else {
          elem.val((displayValue === '0') ? '' : displayValue);
        }
      }

      function setModelNumber(val) {
        var modelNum = val.toString().replace(/,/g, '').replace(/[A-Za-z]/g, '');
        modelNum = parseFloat(modelNum);
        modelNum = (!isNaN(modelNum)) ? modelNum : 0;
        if (modelNum.toString().indexOf('.') !== -1) {
          modelNum = Math.round((modelNum + 0.00001) * 100) / 100;
        }
        if (attrs.positive) {
          modelNum = Math.abs(modelNum);
        }
        return modelNum;
      }
    }
  };
});

https://jsfiddle.net/benlk/4dto9738/