創建支持自動換行和尾數零去除的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數字文本框，兼顧了用戶體驗和數據完整性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
