Polymer 1.x：用紙入力に数値を入力する際の書式設定方法を教えてください。

-2

TL; DR：私は<inputでそれを入力するとき、私の番号は（ない）に見えるようにしたいフォームフィールド（実際<paper-inputあるいは<iron-input？）。 Similar to this exampleを除き、ポリマーのみを使用し、AngularJSは使用しません。Polymer 1.x：用紙入力に数値を入力する際の書式設定方法を教えてください。

ユーザーが入力中にpaper-input（数字を使用）を使用して書式を設定したいとします。私はどこから始めるべきか、何を試みるべきかは分かりません。私はJSの数値にアクセスしたいが、ユーザはそれを入力する際にきれいにフォーマットされた（文字列）バージョンを見ることができるようにしたい。

これも可能ですか？または別の表示フィールドが必要なのでしょうか？しかし、それはUXの観点からpaper-elementsの目的を破るでしょうか？どんな助け？また

、ノートper the second comment on this SO question：Number.prototype.toLocaleStringはまだ実際に数をフォーマットする代わりに2016年には、Safariで動作しないことに注意

価値は、それはそれを返し、エラーがスローされません。その結果として今日最大の顔面を持っています。#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

なぜすべてのダウンボンドがどうか分かりませんか？ – Mowzer

私は紙入力の周りに基づいて、日付ピッカーと似た何かを。 numプロパティにオブザーバーを置くと、新しいキャラクターが到着するたびに呼び出されます。

また、あなたはそれは、ユーザがそれを入力した方法であれば1,0を検証しようとして終わる可能性として検証と注意する必要があります。（彼は

出典

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

ベースとしたり、formatiingせずに入力することが仮定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

Polymer 1.x：用紙入力に数値を入力する際の書式設定方法を教えてください。

答えて

関連する問題