.jpg)
在html和vue中構(gòu)建自動換行并去除尾數(shù)零的數(shù)字文本框
本文探討如何在HTML和Vue.JS中創(chuàng)建一個特殊的文本框，它只接受純數(shù)字輸入，能夠自動換行，并自動去除尾部的零。這是一個具有挑戰(zhàn)性的任務(wù)，尤其是在處理超長數(shù)字時，需要兼顧顯示效果和數(shù)據(jù)完整性。
我們首先需要一個
例如，用戶輸入123456789.234000，文本框中應(yīng)該顯示：
123456 789.234
但Vue.js中的數(shù)據(jù)仍然應(yīng)該保留原始的完整數(shù)字123456789.234000，而不是格式化后的換行字符串。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
為了實現(xiàn)這個功能，我們使用Vue.js的ref來定義兩個變量：originalNumber存儲原始數(shù)據(jù)，formattedNumber用于顯示格式化后的數(shù)據(jù)。 在用戶輸入時，通過keyup事件觸發(fā)一個處理函數(shù)來更新顯示。
以下是一個可能的Vue.js組件實現(xiàn)：
<template> <div> <textarea ref="numberInput" v-model="formattedNumber" @keyup="formatNumber"></textarea> <p>Original Number: {{ originalNumber }}</p> </div> </template> <script> import { ref, computed, watch } from 'vue'; export default { setup() { const numberInput = ref(null); const originalNumber = ref(''); const formattedNumber = ref(''); const formatNumber = () => { // 1. 去除非數(shù)字字符和小數(shù)點(diǎn)以外的字符，并去除多余的小數(shù)點(diǎn) let cleanNumber = numberInput.value.replace(/[^d.]/g, '').replace(/.(?=.*.)/g, ''); // 2. 去除尾部零 cleanNumber = parseFloat(cleanNumber).toString(); originalNumber.value = cleanNumber; // 更新原始數(shù)據(jù) // 3. 每6位數(shù)字換行 let formatted = ''; for (let i = 0; i < cleanNumber.length; i += 6) { formatted += cleanNumber.substring(i, i + 6) + 'n'; } formattedNumber.value = formatted.trim(); // 更新顯示數(shù)據(jù),去除末尾換行符 }; return { numberInput, originalNumber, formattedNumber, formatNumber }; } }; </script>
這個代碼首先清除非數(shù)字字符，然后去除尾部零，最后將數(shù)字每6位分隔并換行。originalNumber始終保存原始數(shù)據(jù)，formattedNumber則顯示格式化后的結(jié)果。 注意，這里使用了parseFloat來去除尾部零，并使用循環(huán)和substring來實現(xiàn)每6位換行。 trim()方法用來去除最后多余的換行符。
這個改進(jìn)后的版本更清晰地展示了數(shù)據(jù)處理流程，并有效地解決了尾部零和換行的問題。 記住根據(jù)實際需求調(diào)整每行顯示的數(shù)字位數(shù) (目前是6位)。
.png)
