HTML中如何实现纯数字自动换行并去除尾数零的Number Textarea？-html教程-PHP中文网

HTML中如何实现纯数字自动换行并去除尾数零的Number Textarea？

碧海醫心

发布： 2025-03-23 08:28:01

原创

1191人浏览过

html中如何实现纯数字自动换行并去除尾数零的number textarea？

创建支持自动换行和尾数零去除的HTML数字文本框

本文介绍如何在HTML中创建一个仅接受数字输入，并实现自动换行和去除尾数零的数字文本框。该文本框在显示时会按每行6位数字进行换行，并去除尾部多余的零，但Vue组件的data中仍保留原始数字值。

例如，输入123456789.234000，文本框显示：

<code>123456
789.234</code>

登录后复制

Vue组件的data中则保存123456789.234000。

实现此功能需要结合Vue框架和JavaScript正则表达式。我们使用两个ref，一个存储原始数据，另一个存储格式化后的显示数据。输入事件触发数据处理函数。

立即学习“前端免费学习笔记（深入）”；

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

以下为Vue组件代码示例：

<template>
  <div>
    <textarea ref="textarea_number" @input="keyupNumber"></textarea>
    <p>原始数据: {{ textarea_number_data }}</p> </div>
</template>

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

export default {
  setup() {
    const textarea_number = ref('');
    const textarea_number_data = ref('');

    const keyupNumber = () => {
      // 使用正则表达式去除非数字和多余小数点
      textarea_number_data.value = textarea_number.value.replace(/[^\d.]/g, '').replace(/\.(?=.*\.)/g, '');

      // 将数字每6位换行，并去除尾部零
      let formattedNumber = textarea_number_data.value;
      if (formattedNumber) {
        const parts = formattedNumber.split('.');
        const integerPart = parts[0];
        const decimalPart = parts[1] || '';

        formattedNumber = integerPart.match(/.{1,6}/g).join('\n');
        if (decimalPart) {
          formattedNumber += `.${decimalPart.replace(/0+$/, '')}`;
        }
      }
      textarea_number.value = formattedNumber;
    };

    return { textarea_number, textarea_number_data, keyupNumber };
  },
};
</script>

登录后复制

代码中，keyupNumber函数负责数据处理。它首先使用正则表达式清除无效字符，确保只有一个小数点。然后，它将整数部分每6位换行，并去除小数部分尾部的零。 textarea_number_data始终保存原始输入值。

通过此方法，我们创建了一个满足要求的HTML数字文本框，兼顾了用户体验和数据完整性。

以上就是HTML中如何实现纯数字自动换行并去除尾数零的Number Textarea？的详细内容，更多请关注php中文网其它相关文章！