HTML中如何實現純數字自動換行并去除尾數零的textarea功能？

html textarea實現純數字自動換行及去除尾數零

本文介紹如何在HTML中創建一個僅接受純數字輸入的textarea，實現長數字自動換行，并去除尾部多余的零的功能。 我們將使用JavaScript來處理輸入和格式化。

需求分析:

我們需要一個textarea，滿足以下條件：

1. 只允許輸入數字和一個小數點: 防止用戶輸入非數字字符。
2. 自動換行: 當數字長度超過textarea寬度時自動換行。
3. 去除尾部零: 例如，12300.000應轉換為12300。
4. 保留原始數據: 在JavaScript中保留未格式化的原始數字值。

解決方案:

立即學習“前端免費學習筆記（深入）”；

我們將使用JavaScript來實現這些功能。以下代碼片段展示了如何創建一個滿足需求的textarea：

<textarea id="numberTextarea" oninput="formatNumber(this)"></textarea> <script> function formatNumber(textarea) {   let value = textarea.value;    // 1. 只允許數字和小數點   value = value.replace(/[^d.]/g, '');   value = value.replace(/.{2,}/g, '.'); //只允許一個點    // 2. 去除尾部零   value = parseFloat(value).toString();    // 3. 自動換行 (根據textarea寬度調整)   let maxLengthPerLine = 10; // 可根據實際需求調整   let formattedValue = '';   for (let i = 0; i < value.length; i += maxLengthPerLine) {     formattedValue += value.substring(i, i + maxLengthPerLine) + 'n';   }    textarea.value = formattedValue.trim(); //去除末尾換行符    //保留原始數據 (例如，存儲在單獨的變量中)   let originalValue = parseFloat(value.replace(/n/g, '')); //移除換行符，轉換為數值   console.log("Original Value:", originalValue); //在控制臺輸出原始值，以便在vue或其他框架中使用  } </script>

代碼解釋:

• oninput 事件監聽器：每當textarea的值發生變化時，都會調用formatNumber函數。
• formatNumber 函數：
  • 使用正則表達式 /[^d.]/g 刪除非數字和非小數點的字符。
  • 使用正則表達式 /.{2,}/g 確保只有一個點存在。
  • parseFloat 函數將字符串轉換為數字，并自動去除尾部零。
  • 循環將數字字符串分割成指定長度的子字符串，并添加換行符。 maxLengthPerLine 變量控制每行顯示的字符數，可以根據textarea的寬度調整。
  • trim() 方法去除字符串末尾的換行符。
  • originalValue 變量存儲原始的數值，方便在Vue或其他框架中使用。

改進建議:

• 動態調整 maxLengthPerLine: 可以根據textarea的實際寬度動態計算 maxLengthPerLine，使換行更加精確。
• 錯誤處理: 可以添加錯誤處理，例如當輸入無效時顯示提示信息。
• 框架集成: 此代碼可以輕松集成到Vue.JS或其他JavaScript框架中，通過數據綁定和方法調用來實現更復雜的交互。

這個改進后的方法提供了更健壯和靈活的解決方案，可以更好地滿足實際應用的需求。 記住將 maxLengthPerLine 調整為適合你textarea寬度的值。