基本演示（土耳其语）

Question

我需要您在AutoNumeric js方面的帮助。

我使用输入并以这种方式扩展：

<input type="text" name="currency" id="currency">
<span class="value_currency"></span>

我正在像这样在javascript中使用AutoNumeric：

new AutoNumeric('#currency', 'Turkish');

并输出如下：

1.750,15

我需要这个：

1750.15

我的问题是，当货币中的数据更改时，如何动态地在value_curreny中打印。但是我需要原始值而不是格式化值。谢谢。

Answer 1

https://github.com/Microsoft/TypeScript/issues/16475

您需要编写以下代码。

HTML：

<script type="text/x-template" id="index-template">
    <div>
    <autonumeric
        v-model="value"
      placeholder="number"
      :options="{mDec: 3}"/>
    <p>{{ value }}</p>
    <button type="button" @click="random">Random</button>
  </div>
</script>

<div id="app">
  <index/>
</div>

Javascript：

Vue.component('autonumeric', {
  props: {
    value: Number,
    options: {
      type: Object,
      default: {}
    },
    tagName: {
        type: String,
      default: 'input'
    }
  },
  created() {
    this.onInput = false;
    this.onPaste = false;
  },
  mounted() {
    const defaultOptions = {aSep: ','},
          options = Object.assign(defaultOptions, this.options),
          input = this.$refs.input,
          $input = jQuery(input);
    $input.autoNumeric('init', options);
    $input.autoNumeric('set', this.value);
    $input.on('focus', () => {
      $input.select();
    });
    // hack pending issue https://github.com/BobKnothe/autoNumeric/issues/251
    $input.on('paste', e => {
      this.onPaste = true;
      const text = new Number(e.originalEvent.clipboardData.getData('Text')).valueOf();
      this.$emit('input', text);
    });
    // end hack
    $input.on('input', e => {
      if (!this.onPaste) {
        this.onInput = true;
        const value = new Number($input.autoNumeric('get')).valueOf();
        this.$emit('input', value);
      }
      this.onPaste = false;
    });
  },
  watch: {
    value(value, oldValue) {
      if (!this.onInput && !this.onPaste) {
        jQuery(this.$refs.input).autoNumeric('set', value);
      }
      this.onInput = false;
    }
  },
  render(createElement) {
    const attrs = this.tagName === 'input' ?
        { type: 'text', style: 'text-align: right;' } :
      {};
    return createElement(this.tagName, {
      attrs,
      ref: 'input'
    });
  }
});

Vue.component('index', {
    template: '#index-template',
  data() {
    return {
        value: 666
    };
  },
  methods: {
    random() {
        this.value = Math.random() * 10000;
    },
    print() {
        console.log('print', this.value);
        }
  }
});

new Vue({
    el: '#app'
});

Answer 2

如果对任何人有帮助，我最终会使用AutoNumeric静态方法“ getNumber”

https://github.com/autoNumeric/autoNumeric/blob/master/README.md#static-methods

在这种情况下：

AutoNumeric.getNumber('#currency');

Answer 3

下面的代码使用jquery跟踪对#currency输入进行更改的时间，我使用了广泛的事件触发器，以便代码可以在任何keydown，paste等上运行更改。您可能需要根据自己的需要进行调整（即减少触发器的数量）。注册触发事件后，代码将执行以下操作：

将输入的.val()收集为
将所有非数字或小数点的字符（即您的货币字符）替换为.replace(/[^\d.-]/g, '')
将此新的压缩字符串分配给.html()的{{1}}。

如果您希望逗号保留在字符串中（即将1,234.56英镑简化为1,234.56，则将.currency-value函数从regex更改为.replace(/[^\d.-]/g, '')（即在其中添加逗号）。下面的代码目前删除逗号。

让我知道这是否不是您想要的。

基本演示（土耳其语）

土耳其里拉已添加到v4.2.8。这是一个基本设置，演示了如何获取仅基于逗号的货币的原始价值。

.replace(/[^\d.,-]/g, '')

// Apply Autonumeric to #currency input
new AutoNumeric('#currency', 'Turkish');

// Trigger function of any change to #currency input 
$("#currency").on("propertychange change keyup paste input", function(){

  // Get value from input, replace all non-numeric or '.' values 
  rawValue = $(this).val().replace(/[^\d,-]/g, '');
  
  // Replace comma with decimal point
  rawValue = rawValue.replace(",", '.');

  // Print value
  $(".value_currency").html( rawValue );
  
});

扩展演示

此扩展演示允许您使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/autonumeric@4.5.1/dist/autoNumeric.min.js"></script> <input type="text" name="currency" id="currency"> <span class="value_currency"></span>来存储货币类型，以及基于逗号还是小数点的货币。

attr

// Apply Autonumeric to #currency input
$("input[currency]").each(function() {

  // Get id of this element
  currencyID = $(this).attr("id");

  // Apply AutoNumeric to given input
  new AutoNumeric('#' + currencyID, $(this).attr("currency"));

});


// Trigger function of any change to #currency input 
$("input[currency]").on("propertychange change keyup paste input lostfocus", function() {

  // Get divider from the element's attribute
  divider = $(this).attr("currency-divider");

  // Create regex expression and apply
  var regex2 = new RegExp('[^0-9' + divider + ']', 'g');
  rawValue = $(this).val().replace(regex2, '');

  // Decimalisation of non-decimal based currencies by default if only a single divider is specified
  // Automatically applied to comma based currencies only
  if (divider.length == 1 && divider != ".") {
    rawValue = rawValue.replace(divider, '.');
  }

  // Print raw value
  $(this).parent().children(".value_currency").html(rawValue);

});

如何使用AutoNumeric js动态打印输入的原始值？

3 个答案:

基本演示（土耳其语）

扩展演示