JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="app">
  <input v-model="amount" @input="handleInput" id="amount-input" type="text">
  {{amount}}
</div>

JavaScript

new Vue({
  el: "#app",
  data() {
  	return {
    	amount: ""
    }
  },
  mounted() {
    const input = document.getElementById('amount-input')
    console.log(input)
    this.handleInput()
  },
  methods: {
    handleInput() {
      let val = document.getElementById('amount-input').value
      let str = ""
      console.log(val)
      // number char codes > 48 - 57, dot char code > 46

      for (let i = 0; i < val.length; i++) {
        if ((val[i].charCodeAt(0) >= 48 && val[i].charCodeAt(0) <= 57) || val[i].charCodeAt(0) === 46) {
          console.log(val[i].charCodeAt(0))
          str += (i === 0 && val[i].charCodeAt(0) === 46) || (val[i] === "." && str.includes(".")) ? "" : val[i]
        }
        this.amount = str
      }
    },
  }
})