HTML에서 순수한 숫자의 Textarea 기능을 자동으로 래핑하고 제거하는 방법은 무엇입니까?

HTML Textarea 구축 : 자동으로 포장하고 꼬리 0을 제거 할 순수한 숫자를 실현합니다.

프론트 엔드 개발에서는 HTML textarea 만들고, 라인을 랩핑하기위한 순수한 숫자를 실현하고, 동시에 숫자의 꼬리에서 0을 제거하는 등 일부 특별한 요구가 필요합니다. 다음은이 문제를 해결하고 사용자의 요구를 충족시키는 솔루션입니다.

사용자는 입력 번호가 너무 길어서 자동으로 줄을 랩핑하고 후행 0을 자동으로 제거하는 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 에 바인딩하는 데 사용됩니다.
• keyup 이벤트가 트리거 될 때 formatNumber 기능이 실행되며 숫자를 형식화 할 책임이 있습니다.
  • 정규 표현식을 사용하여 숫자가 아닌 문자와 추가 소수점을 제거하십시오.
  • parseFloat 사용하여 꼬리 0을 제거하십시오.
  • 숫자를 6 자리마다 그룹으로 나누고 자동 라인 브레이크를 달성하기 위해 최신 라인과 연결하십시오.

이런 식으로 textarea 에서 사용자가 보이는 숫자는 형식화되지만 원래 수치 값은 여전히 ​​VUE 구성 요소 내부에 유지되어 사용자의 모든 요구를 충족시킵니다.

위 내용은 HTML에서 순수한 숫자의 Textarea 기능을 자동으로 래핑하고 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!