Paparkan html-Input-value sebagai nombor dalam format Jerman apabila input berubah semasa menjejaki nombor perpuluhan

Question

Jadi nombor perpuluhan Jerman menggunakan koma perpuluhan. Semasa memformat, kami juga menggunakan noktah untuk mengumpulkan nombor. Jadi nombor 10000.45 akan diformatkan sebagai 10.000,45.

Sekarang saya mahukan medan input (nombor atau teks) di mana anda boleh memasukkan cara "Jerman" menggunakan noktah dan koma. Walau bagaimanapun, saya juga ingin menjejaki nilai "normal" dalam JavaScript.

Gunakan arahan berikut untuk menukar nilai angka kepada nilai dalam format Jerman dengan mudah

number.toLocaleString("de-DE", { maxFractionDigits: 2 })

Tetapi bagaimana untuk mengembalikannya kepada nombor perpuluhan? Kerana apabila saya memaparkan nilai dalam format Jerman seperti "7,20" saya tambahkan pada penghujung, bukan?

Ini adalah percubaan awal untuk svelte-repl, seperti yang ditunjukkan di bawah: https://svelte.dev/repl/fabd0a80f4ee49509cd875c0175bcf22?version=4.0.1

<script>
  let numericValue = 0;
  let formattedValue = '';

  function formatNumber(value) {
    return value.toLocaleString("de", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
  }

  function handleInput(event) {
    // Remove dots as thousand separators and convert decimal comma to dot
    const inputValue = event.target.value.replace(/\./g, '').replace(/,/g, '.');

    // Update numericValue with parsed float
    numericValue = parseFloat(inputValue);

    // Update formattedValue for display
    formattedValue = formatNumber(numericValue);
  }
</script>

<input type="text" value={formattedValue} on:input={handleInput} />

<p>Numeric value: {numericValue}</p>

Sebaik-baiknya saya ingin memaparkan nilai terformat pada acara input. Tetapi ia juga boleh muncul pada acara semasa perubahan. Atau gunakan butang di sebelah atau sesuatu. Sebarang petua akan sangat dihargai! :)

Answer 1

Saya syorkan jangan main-main dengan input pengguna, iaitu jangan lakukan ini pada input 事件处理程序中设置 formattedValue 。如果您想很好地设置数字格式，请在第一次显示组件时执行此操作，并在模糊 untuk mengelakkan gangguan dengan niat pengguna.

Jika anda benar-benar ingin menguatkuasakan format tertentu apabila pengguna memasukkan, ia tidak mudah kerana kedudukan kursor, tanda nombor, nilai jelas dan faktor lain perlu diambil kira. Terdapat juga perpustakaan yang boleh mencapai ini, seperti imask.