構建html textarea：實現(xiàn)純數(shù)字自動換行及去除尾部零
前端開發(fā)中，常常需要處理一些特殊需求，例如創(chuàng)建一個HTML textarea，實現(xiàn)純數(shù)字的自動換行，并同時去除數(shù)字尾部的零。 以下是如何解決這個問題，并滿足用戶需求的方案：
用戶希望創(chuàng)建一個textarea，當輸入的數(shù)字過長時自動換行，并且自動去除尾部的零。例如，輸入 123456789.234000，期望顯示效果為：
123456 789.234
但同時，vue組件內(nèi)部需要保留原始的 123456789.234000 值。
為了實現(xiàn)這個功能，我們可以結合Vue.JS框架，利用 v-model 和 keyup 事件來處理用戶輸入。以下是一個可行的Vue組件代碼示例：
立即學習“前端免費學習筆記（深入）”；
<template> <div> <textarea v-model="formattedNumber" @keyup="formatNumber"></textarea> <p>原始數(shù)值: {{ originalNumber }}</p> </div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const originalNumber = ref(''); const formattedNumber = ref(''); const formatNumber = () => { // 去除非數(shù)字和多余小數(shù)點 let num = formattedNumber.value.replace(/[^d.]/g, '').replace(/.(?=.*.)/g, ''); // 去除尾部零 num = parseFloat(num).toString(); originalNumber.value = num; // 更新原始數(shù)值 // 自動換行 (每6位換行) formattedNumber.value = num.match(/.{1,6}/g).join('n'); }; return { originalNumber, formattedNumber, formatNumber, }; }, }; </script>
在這個組件中：
- originalNumber 存儲原始的數(shù)字值。
- formattedNumber 用于顯示格式化后的數(shù)字，并綁定到 textarea 的 v-model。
- formatNumber 函數(shù)在 keyup 事件觸發(fā)時執(zhí)行，負責格式化數(shù)字：
- 使用正則表達式去除非數(shù)字字符和多余的小數(shù)點。
- 使用 parseFloat 去除尾部的零。
- 將數(shù)字分割成每6位一組，并用換行符連接，實現(xiàn)自動換行。
通過這種方式，用戶在 textarea 中看到的數(shù)字是格式化后的，但 Vue 組件內(nèi)部仍然保留了原始的數(shù)字值，滿足了用戶的所有需求。
? 版權聲明
文章版權歸作者所有，未經(jīng)允許請勿轉載。
THE END
