How to implement the textarea function of pure numbers automatically wrapping and removing the mantissa 0 in HTML?

Building HTML textarea: Realize pure numbers to automatically wrap and remove tail zeros

In front-end development, some special needs are often needed to deal with, such as creating an HTML textarea , realizing pure numbers to wrap lines, and simultaneously removing zeros at the tail of the number. Here is a solution to solve this problem and meet user needs:

The user wants to create a textarea that automatically wraps lines when the input number is too long and automatically removes the trailing zeros. For example, enter 123456789.234000 and the desired display effect is:

 <code>123456 789.234</code>

But at the same time, the original 123456789.234000 value needs to be retained inside the Vue component.

To achieve this function, we can combine the Vue.js framework to use v-model and keyup events to process user input. Here is a viable Vue component code example:

<template>
  <div>
    <textarea v-model="formattedNumber"></textarea>
    <p>Original value: {{ originalNumber }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const originalNumber = ref('');
    const formattedNumber = ref('');

    const formatNumber = () => {
      // 去除非数字和多余小数点
      let num = formattedNumber.value.replace(/[^\d.]/g, '').replace(/\.(?=.*\.)/g, '');

      // 去除尾部零
      num = parseFloat(num).toString();

      originalNumber.value = num; // 更新原始数值

      // 自动换行 (每6位换行)
      formattedNumber.value = num.match(/.{1,6}/g).join('\n');
    };

    return {
      originalNumber,
      formattedNumber,
      formatNumber,
    };
  },
};
</script>

In this component:

• originalNumber stores the original numeric value.
• formattedNumber is used to display the formatted numbers and bind to v-model of textarea .
• The formatNumber function is executed when keyup event is triggered and is responsible for formatting the numbers:
  • Use regular expressions to remove non-numeric characters and extra decimal points.
  • Use parseFloat to remove the tail zeros.
  • Split the numbers into groups of every 6 digits and concatenate them with newlines to achieve automatic line breaks.

In this way, the numbers seen by the user in textarea are formatted, but the original numerical value is still retained inside the Vue component, meeting all the user's needs.

The above is the detailed content of How to implement the textarea function of pure numbers automatically wrapping and removing the mantissa 0 in HTML?. For more information, please follow other related articles on the PHP Chinese website!