聚合物1.x：如何在輸入紙張時輸入數字進行格式化？

-2

TL; DR：我希望我的號碼在<input（實際上<paper-input甚至<iron-input？）的形式字段中輸入時，它看起來像（不）。 Similar to this example除了僅使用聚合物而不使用AngularJS。聚合物1.x：如何在輸入紙張時輸入數字進行格式化？

我想在使用者輸入時在paper-input（使用Numeral.js）中格式化數字。我不知道從哪裏開始或嘗試什麼。我想訪問JS中的數值，但我希望用戶能夠在輸入時看到格式良好的（字符串）版本。

這甚至可能嗎？或者，也許我可能需要一個單獨的顯示字段？但是，那麼從UX的角度來看，這將打敗paper-elements的目的？任何幫助？

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

值得關注的是Number.prototype.toLocaleString仍然無法在Safari工作，在2016年，而不是實際的數字格式，它只是返回它，沒有錯誤拋出。今天有最大的面罩，因爲... #goodworkApple - aendrew

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

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

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

來源

2016-10-03 Mowzer

您是否嘗試過類似綁定值的函數你在哪裏格式化？ – a1626

不知道爲什麼所有的downvotes？ – Mowzer

我做根據各地紙張輸入一個日期選擇器類似的事情。將觀察者放在num屬性上，並在每個新字符到達時調用它。

您還需要小心驗證，你最終可能會試圖驗證1,0如果是用戶在鍵入它的方式。（假設他可以帶或不帶你的formatiing鍵入

來源

2016-10-04 16:16:00 akc42

可能你可以在代碼示例中展示你的想法？ [也許克隆這個jsBin並修改它]（http://jsbin.com/wosoxohixa/1/edit?html,output）？我遇到的問題是我不知道從哪裏開始。例如，我覺得'value'屬性應該是格式化的字符串。但是要首先輸入值，我覺得它應該是一個數字，然後將其格式化爲*字符串。這就像雞或雞蛋問題。我不知道如何破解它。 – Mowzer

嘗試 - 它不是正確的，因爲我不知道數字是如何工作的，但你可以看到它是如何格式化在飛行http://jsbin.com/qivimomusa/1/edit?html,output – akc42

你寄給我的正確的方向。 [我根據你的輸入製作了這個jsBin]（http://jsbin.com/vijarijiji/1/edit?html,console,output）。 – Mowzer

基礎的從@ akc42，I constructed the following working jsBin答案。... http://jsbin.com/zunezojuzu/1/edit?html,console,output

http://jsbin.com/zunezojuzu/1/edit?html,console,output

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

來源

2016-10-04 22:27:42 Mowzer

聚合物1.x：如何在輸入紙張時輸入數字進行格式化？

回答

相關問題