Afficher la valeur d'entrée HTML sous forme de nombre au format allemand lorsque l'entrée change lors du suivi des nombres décimaux

Question

Les nombres décimaux allemands utilisent donc des virgules décimales. Lors du formatage, nous utilisons également des points pour regrouper les nombres. Ainsi, le nombre 10000,45 sera formaté comme 10.000,45.

Maintenant, je veux un champ de saisie (chiffre ou texte) dans lequel vous pouvez saisir la manière "allemande" en utilisant des points et des virgules. Cependant, je souhaite également suivre les valeurs "normales" en JavaScript.

Utilisez la commande suivante pour convertir facilement une valeur numérique en une valeur au format allemand

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

Mais comment le ramener au nombre décimal ? Parce que lorsque j'affiche une valeur au format allemand comme "7,20", je l'ajoute à la fin, non ?

Il s'agit d'une première tentative de svelte-repl, comme indiqué ci-dessous : 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>

Idéalement, j'aimerais afficher la valeur formatée sur l'événement d'entrée. Mais il peut également apparaître lors d’événements de changement. Ou même utiliser le bouton sur le côté ou quelque chose comme ça. Tous les conseils seraient grandement appréciés ! :)

Answer 1

Je recommande de ne pas jouer avec les entrées de l'utilisateur, c'est-à-dire de ne pas faire cela sur input 事件处理程序中设置 formattedValue 。如果您想很好地设置数字格式，请在第一次显示组件时执行此操作，并在模糊 pour éviter d'interférer avec l'intention de l'utilisateur.

Si vous souhaitez vraiment imposer un certain format lors de la saisie par l'utilisateur, ce n'est pas simple car la position du curseur, les signes numériques, les valeurs claires et d'autres facteurs doivent être pris en compte. Il existe également des bibliothèques qui peuvent y parvenir, comme imask.