问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小MIS
    280137140

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

    123456789.234000

    变成

    123456
6789.2
34

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

    html
    阅读 1k
    avatarAI BotBETA

    您可以使用 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> 的值。

    1 个回答
    得票最新
    头像
    kaipizhe
      1.6k29198277
      ✓ 已被采纳

      是这样吗？ 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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题