Wie implementieren Sie die TextArea -Funktion reiner Zahlen automatisch die Mantissa 0 in HTML?

Erstellen von HTML -TextArea: Reine Zahlen realisieren

In der Front-End-Entwicklung werden häufig einige besondere Bedürfnisse benötigt, um mit der Erstellung eines HTML- textarea , der Erkennung von reinen Zahlen zum Wickeln von Linien und gleichzeitigem Entfernen von Nullen am Schwanz der Anzahl zu werden. Hier ist eine Lösung, um dieses Problem zu lösen und Benutzeranforderungen zu erfüllen:

Der Benutzer möchte einen textarea erstellen, der die Zeilen automatisch umhüllt, wenn die Eingangsnummer zu lang ist, und die nachverfolgenden Nullen automatisch entfernt. Geben Sie beispielsweise 123456789.234000 ein und der gewünschte Anzeigeeffekt lautet:

 <code>123456 789.234</code>

Gleichzeitig muss der ursprüngliche Wert 123456789.234000 in der Vue -Komponente beibehalten werden.

Um diese Funktion zu erreichen, können wir das Vue.js-Framework so kombinieren, dass wir v-model und keyup -Ereignisse verwenden können, um die Benutzereingaben zu verarbeiten. Hier ist ein praktikables Beispiel für den Komponentencode:

<template>
  <div>
    <textarea v-model="formattedNumber"></textarea>
    <p>Originalwert: {{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>

In dieser Komponente:

• originalNumber speichert den ursprünglichen numerischen Wert.
• formattedNumber wird verwendet, um die formatierten Zahlen anzuzeigen und an v-model von textarea zu binden.
• Die formatNumber -Funktion wird ausgeführt, wenn keyup Schlüsselereignis ausgelöst wird und für die Formatierung der Zahlen verantwortlich ist:
  • Verwenden Sie regelmäßige Ausdrücke, um nicht numerische Zeichen und zusätzliche Dezimalpunkte zu entfernen.
  • Verwenden Sie parseFloat , um die Schwanznullen zu entfernen.
  • Teilen Sie die Zahlen in Gruppen von jeweils 6 Ziffern auf und verkettet sie mit Newlines, um automatische Linienbrüche zu erzielen.

Auf diese Weise werden die vom Benutzer im textarea angezeigten Zahlen formatiert, der ursprüngliche numerische Wert wird jedoch in der VUE -Komponente weiterhin erhalten, wodurch alle Bedürfnisse des Benutzers erfüllt werden.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie die TextArea -Funktion reiner Zahlen automatisch die Mantissa 0 in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!