Polymer 1.x：如何在输入纸质输入时格式化数字？

Question

TL;DR：我希望我的数字在 [=12= 中输入时看起来像 1,500（而不是 1500） ]（实际上是 <paper-input 甚至 <iron-input？）表单字段。 Similar to this example 除了仅使用 Polymer 而不是 AngularJS。

我想在用户输入数字时格式化 paper-input 中的数字（例如使用 Numeral.js）。我真的不知道从哪里开始或尝试什么。我想访问 JS 中的数值，但我希望用户在输入时能够看到格式正确的（字符串）版本。

这可能吗？或者我可能需要一个单独的显示字段？但是从用户体验的角度来看，这会破坏 paper-elements 的目的吗？有帮助吗？

另外，请注意 per the second comment on this SO question：

Worth noting that Number.prototype.toLocaleString still does not work in Safari, in 2016. Instead of actually formatting the number, it just returns it, no error thrown. Having the biggest facepalm today as a result of that... #goodworkApple – aendrew

Here is the jsbin. ... http://jsbin.com/wosoxohixa/1/edit?html,output

http://jsbin.com/wosoxohixa/1/edit?html,输出

<!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: Number,
          value: function() {
            return numeral(1500).format('0,0');
          },
        },
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

我用基于纸张输入的日期选择器做了类似的事情。在 num 属性上放置一个观察者，它会在每个新角色到达时被调用。

您还需要小心验证，因为您可能最终会尝试验证 1,0，如果这是用户输入的方式。（假设他可能会使用或不使用您的格式

Answer 2

根据@akc42 的回答，I constructed the following working jsBin. ... http://jsbin.com/zunezojuzu/1/edit?html,console,output

http://jsbin.com/zunezojuzu/1/edit?html,控制台,输出

<!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>

Polymer 1.x：如何在输入纸质输入时格式化数字？

Polymer 1.x: How to format a number while typing it into paper-input?

javascript

polymer

polymer-1.0

paper-elements

numeral.js