是否可以在文本字段中显示输入值以外的内容？

Question

现在，我试图让它，以便当用户输入文本字段时，它会以特定格式显示文本。但是，我不希望它实际更改文本字段的值，只需更改显示的值。

这就是我希望文本向用户展示的方式：

但是，它实际上应该具有500000000的值，没有任何逗号。

基本上，我需要的是它的显示值与输入的实际值不同。

为此，我尝试创建一个扩展Ember.TextField类的组件，如下所示：

import Ember from "ember";

export default Ember.TextField.extend({
  init: function(){
    this._super();

    var value = this.get('value');
    var money = accounting.formatNumber(value, 0);
    this.set('value', money);
  },
  keyDown: function() {
    var value = this.get('value');
    var unformat = accounting.unformat(value);
    this.set('value', unformat);
  },
  keyUp: function() {
    var value = this.get('value');
    var money = accounting.formatNumber(value, 0);
    this.set('value', money);
  }
});

格式化得足够好，但是大部分代码依赖于动态获取输入的值。因此，有没有办法隐藏输入的实际值（因此它可以在表单提交时使用，还有一些其他组件在文本字段更新时更新它们的值）并显示格式化的值？还有其他我尚未找到的解决方案吗？

Answer 1

我建议使用computed property：

numberWithCommas: function(key, value, previousValue) {
  // setter
  if (arguments.length > 1) {
    this.set('number', accounting.unformat(value));
  }

  // getter
  return accounting.formatNumber(value, 0);
}.property('number')

然后，您可以将TextField绑定到numberWithCommas，它会以逗号显示，但会将其删除以便存储。