HTMLでMantissa 0を自動的にラッピングおよび削除する純粋な数字のTextarea関数を実装する方法は？

HTML Textareaの構築：純粋な数字を実現して、テールゼロを自動的にラップして削除します

フロントエンドの開発では、HTML textarea作成、ラインを包むための純粋な数字を実現し、同時に数の尾でゼロを削除するなど、対処するためにいくつかの特別なニーズが必要になることがよくあります。この問題を解決し、ユーザーのニーズを満たすためのソリューションは次のとおりです。

ユーザーは、入力番号が長すぎて後続のゼロを自動的に削除するときに、ラインを自動的にラップするtextareaを作成したいと考えています。たとえば、 123456789.234000入力すると、目的の表示効果は次のとおりです。

 <code>123456 789.234</code>

しかし同時に、元の123456789.234000値をVUEコンポーネント内で保持する必要があります。

この関数を達成するために、Vue.jsフレームワークを組み合わせてv-modelとkeyupイベントを使用してユーザー入力を処理できます。これが実行可能なVUEコンポーネントコードの例です。

<template>
  <div>
    <textarea v-model="formattedNumber"></textarea>
    <p>元の値：{{originalnumber}}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const originalNumber = ref('');
    const formattedNumber = ref('');

    const formatNumber = () => {
      // 去除非数字和多余小数点
      let num = formattedNumber.value.replace(/[^\d.]/g, '').replace(/\.(?=.*\.)/g, '');

      // 去除尾部零
      num = parseFloat(num).toString();

      originalNumber.value = num; // 更新原始数值

      // 自动换行 (每6位换行)
      formattedNumber.value = num.match(/.{1,6}/g).join('\n');
    };

    return {
      originalNumber,
      formattedNumber,
      formatNumber,
    };
  },
};
</script>

このコンポーネントで：

• originalNumber元の数値を保存します。
• formattedNumberは、フォーマットされた数値を表示し、 textareaのv-modelにバインドするために使用されます。
• formatNumber関数は、 keyupイベントがトリガーされたときに実行され、数値のフォーマットを担当します。
  • 正規表現を使用して、数字以外の文字と余分な小数点を削除します。
  • parseFloatを使用して、テールゼロを除去します。
  • 数値を6桁ごとに分割し、ニューラインで連結して自動ラインブレークを実現します。

このようにして、 textareaのユーザーが見た数字はフォーマットされていますが、元の数値はVueコンポーネント内に保持され、すべてのユーザーのニーズを満たしています。

以上がHTMLでMantissa 0を自動的にラッピングおよび削除する純粋な数字のTextarea関数を実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。