聚合物1.x:使用铁输入来格式化输入上的数字

Polymer 1.x: Using iron-input to format numbers on input

本文关键字:输入 格式化 数字 聚合物      更新时间:2023-09-26

在这个jsBin中,我使用逗号格式化输入数字。但是,是否有一种方法可以使用聚合物元素(如<iron-input)来实现这一点,从而减少代码和解决方案,更原生的平台?

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
  <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
</head>
<body>
<dom-module id="x-element">
<template>
  <style></style>
<paper-input value="{{num}}"></paper-input>
</template>
<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        num: {
          type: String,
          observer: '_numChanged',
        },
      },
      attached: function() {
        this.numBeingChanged = false;
      },
      _numChanged: function(num) {
        console.log('num', num);
        if (!this.numBeingChanged) {
          this.numBeingChanged = true; //prevent recursion
          var x = num.replace(/'D/g,'')
          x = parseInt(x);
          console.log('x', x);
          this.set('num', numeral(x).format('0,0'));
          this.numBeingChanged = false;
        }
      }
    });
  })();
</script>
</dom-module>
<x-element></x-element>
</body>

似乎是toLocalString()Number原型上的工作:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString