请问如何写html只能纯数字过长自动换行+自动去掉尾数0的number textarea?

Question

请问如何写html只能纯数字过长自动换行+自动去掉尾数0的number textarea?
目前用input number type只能一行，假设宽度只能100，大数量很多数字会被吃掉
想要多的数字跨行并且去掉尾数为0的如

123456789.234000

变成

1234566789.234

vue 的 data 取值还是能取得 123456789.234000 而不是 123456\n789.2\n34

Answer 1

是这样吗？ textarea_number_data 就是要获取的值 textarea_number 是显示值

<script setup>import {ref} from "vue";const textarea_number_data = ref();const textarea_number = ref();const keyupNumber = () => {    textarea_number_data.value = textarea_number.value.replace(/[^\d.]/g, "").replace(/\.(?=.*\.)/g, "");    console.log(textarea_number_data.value)    textarea_number.value = textarea_number_data.value.match(/.{1,6}/g).join("\n");}</script><template><textarea v-model="textarea_number" @keyup="keyupNumber()"></textarea></template>

Answer 2

您可以使用 HTML 的 <textarea> 元素并设置其 wrap 属性为 hard，以达到自动换行的效果。然后，您可以通过 JavaScript 获取和处理这个文本区域的内容，以实现自动去除尾数 0 的功能。

以下是一个可能的实现：

<template>  <div>    <textarea       :value="formattedNumber"       @input="updateNumber"       wrap="hard"       style="width: 100px; height: 200px;"    ></textarea>  </div></template><script>export default {  data() {    return {      number: '',      formattedNumber: '',    };  },  methods: {    updateNumber() {      let str = this.number.toString();      let parts = str.split('.');      let integerPart = parts[0];      let decimalPart = parts[1] ? parts[1] : '0';      let formattedIntegerPart = '';      let formattedDecimalPart = '';      for(let i = 0; i < integerPart.length; i++) {        if(integerPart[i] != '0' || formattedIntegerPart.length == 0) {          formattedIntegerPart += integerPart[i];        } else if(integerPart[i] == '0' && formattedIntegerPart.length != 0) {          break;        }      }      for(let i = 0; i < decimalPart.length; i++) {        if(decimalPart[i] != '0' || formattedDecimalPart.length == 0) {          formattedDecimalPart += decimalPart[i];        } else if(decimalPart[i] == '0' && formattedDecimalPart.length != 0) {          break;        }      }      this.formattedNumber = formattedIntegerPart + '.' + formattedDecimalPart;    },  },  mounted() {    this.number = this.$data; // Assuming the initial value is stored in $data. You may need to adjust this line according to your actual situation.    this.updateNumber(); // Call this method to format the number initially.  },};</script>

这段代码的核心部分是 updateNumber 方法，它负责处理 <textarea> 的输入事件，将数字格式化为指定的形式。它首先将数字分割为整数部分和小数部分，然后分别对整数部分和小数部分进行处理。对于整数部分，它只保留每三位数字后的第一个非零数字，对于小数部分，它只保留每三位数字后的第一个非零数字。最后，它将格式化后的整数部分和小数部分重新组合起来，并设置为 <textarea> 的值。