Polymer 1.x: как форматировать номер при вводе его в бумажный ввод?

-2

TL; DR: Я хочу, чтобы мои номера выглядеть (не) при вводе его в поле формы <input (на самом деле <paper-input или даже <iron-input?). Similar to this example кроме полимеров, а не угловых.Polymer 1.x: как форматировать номер при вводе его в бумажный ввод?

Я хочу отформатировать номер в paper-input (используя, например, Numeral.js), пока он вводится пользователем. Я не знаю, с чего начать и что попробовать. Я хочу получить доступ к числовому значению в JS, но я хочу, чтобы пользователь мог видеть красиво отформатированную (строковую) версию при ее вводе.

Возможно ли это? Или, возможно, мне может понадобиться отдельное поле отображения? Но тогда это победит цель paper-elements с точки зрения UX? Любая помощь?

Кроме того, обратите внимание per the second comment on this SO question:

Стоит отметить, что Number.prototype.toLocaleString до сих пор не работает в Safari, в 2016 году вместо собственно форматирования числа, он просто возвращает его, не выброшен никакой ошибки. Имея самый большой facepalm сегодня в результате этого ... #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

я сделать что-то подобное с DatePicker на основе вокруг входа бумаги. Поместите наблюдателя в свойство num, и он будет вызван по мере поступления каждого нового персонажа.

Вы также должны быть осторожны с проверкой, как вы можете в конечном итоге пытается проверить 1,0, если это так, как пользователь ввел его. (При условии, что он может ввести с или без вашего formatiing

источник

2016-10-04 16:16:00 akc42

Could вы можете показать свои идеи в примере кода? [Возможно клонировать этот 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

Based на ответ от @ 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: как форматировать номер при вводе его в бумажный ввод?

ответ

Смежные вопросы