如何用 JavaScript 实现 HTML 数字多行文本框的自动换行和格式化？

如何在 html 中实现只能输入纯数字、自动换行且去掉尾数 0 的数字多行文本框

要解决这个问题，需要通过 JavaScript 操作来实现。

代码实现：

在 Vue.js 中，可以如下实现：

<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, "");
    textarea_number.value = textarea_number_data.value
        .match(/.{1,6}/g)
        .join("
");
}
</script>

<template>
  <textarea v-model="textarea_number" @keyup="keyupNumber()"></textarea>
</template>

登录后复制

使用方法：

立即学习“”；

在 HTML 文档中通过 v-model 指令绑定到数据，并使用 @keyup 事件监听器调用 keyupNumber() 方法。

原理解释：

• keyupNumber() 方法接收 textarea_number.value 输入值。
• 首先，该方法用正则表达式删除非数字和多余的小数点。
• 然后，使用正则表达式将剩下的数字字符每 6 个一组，以 ” ” 字符分隔。
• 分隔后的字符串会被更新回 textarea_number.value 中，实现自动换行。
• 当用户输入时，keyup 事件触发 keyupNumber() 方法，实时更新文本框的内容。

这样，通过 JavaScript 的操作，就可以实现只能输入纯数字、自动换行且去掉尾数 0 的数字多行文本框功能。

以上就是如何用 JavaScript 实现 HTML 数字多行文本框的自动换行和格式化？的详细内容，更多请关注米云其它相关文章！