我要评论
创建支持自动换行和尾数零去除的html数字文本框
本文介绍如何在html中创建一个仅接受数字输入，并实现自动换行和去除尾数零的数字文本框。 该文本框在显示时会按每行6位数字进行换行，并去除尾部多余的零，但vue组件的data中仍保留原始数字值。
例如，输入123456789.234000，文本框显示：
123456 789.234
登录后复制
vue组件的data中则保存123456789.234000。
实现此功能需要结合vue框架和javascript正则表达式。 我们使用两个ref，一个存储原始数据，另一个存储格式化后的显示数据。 输入事件触发数据处理函数。
以下为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？的详细内容，更多请关注代码网其它相关文章！
![如何使用正则表达式匹配非[url]标签之外的@用户名？](https://images1.3wcode.com/3wcode/20250330/s_0_202503300051298126.jpg)
![如何在不使用断言的情况下匹配非[url]标签之外的@用户名？](https://images1.3wcode.com/3wcode/20250330/s_0_202503300051375916.jpg)
发表评论