Đầu vào tiền tệ HTML

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

1 phải là mã tiền tệ theo tiêu chuẩn ISO 4217, chẳng hạn như "USD" cho đô la Mỹ, "EUR" cho đồng euro hoặc "CNY" cho RMB của Trung Quốc

Bất kỳ tùy chọn tiền tố, hậu tố, dấu tách nhóm và dấu tách thập phân nào được chuyển vào sẽ ghi đè cài đặt ngôn ngữ mặc định

Quy mô thập phân và giới hạn thập phân

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

2 và

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

3 nghe giống nhau nhưng có cách sử dụng khác nhau

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

2 ngăn người dùng nhập nhiều hơn giới hạn và

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

3 sẽ định dạng số thập phân

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

6 theo độ dài đã chỉ định, đệm hoặc cắt xén nếu cần

Thí dụ

If decimalScale is 2

- 1.5 becomes 1.50 [padded]
- 1.234 becomes 1.23 [trimmed]

---

If decimalLimit is 2

- User enters 1.23
- User is then prevented from entering another value

Độ dài thập phân cố định

Sử dụng

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

7 để giá trị sẽ luôn có độ dài thập phân được chỉ định

Định dạng này xảy ra trênBlur

Ví dụ nếu

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

7 là 2

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

Định dạng giá trị hiển thị

Sử dụng hàm

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

9 để định dạng các giá trị thành chuỗi thân thiện với người dùng hơn. Điều này hữu ích nếu bạn đang hiển thị giá trị ở một nơi khác, tức là. tổng của nhiều đầu vào

import { formatValue } from 'react-currency-input-field';

// Format using prefix, groupSeparator and decimalSeparator
const formattedValue1 = formatValue[{
  value: '123456',
  groupSeparator: ',',
  decimalSeparator: '.',
  prefix: '$',
}];

console.log[formattedValue1];
// $123,456

// Format using intl locale config
const formattedValue2 = formatValue[{
  value: '500000',
  intlConfig: { locale: 'en-IN', currency: 'INR' },
}];

console.log[formattedValue2];
// ₹5,00,000

v3. 0. 0 Ghi chú phát hành

Thay đổi đột phá

• ⚠️onChange đổi tên thành onValueChange⚠️

• import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  2 đã bị xóa

• import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  3 được đổi tên thành

  If decimalScale is 2
  
  - 1.5 becomes 1.50 [padded]
  - 1.234 becomes 1.23 [trimmed]
  
  ---
  
  If decimalLimit is 2
  
  - User enters 1.23
  - User is then prevented from entering another value

  2

• import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  5 được đổi tên thành

  import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  6

• import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  7 được đổi tên thành

  - 1 -> 1.00
  - 123 -> 1.23
  - 12.3 -> 12.30
  - 12.34 -> 12.34

  3

Những cải tiến trong v3

• có thể được chuyển vào. Xin lưu ý. định dạng trong đó ký hiệu tiền tệ được đặt sau giá trị như hậu tố, vd. [1 234,56 €] có thể gây ra sự cố, điều này vẫn đang được phát triển
• Dấu tách nhóm sẽ mặc định là ngôn ngữ của trình duyệt nếu không được chỉ định
• Có thể truyền

  import { formatValue } from 'react-currency-input-field';
  
  // Format using prefix, groupSeparator and decimalSeparator
  const formattedValue1 = formatValue[{
    value: '123456',
    groupSeparator: ',',
    decimalSeparator: '.',
    prefix: '$',
  }];
  
  console.log[formattedValue1];
  // $123,456
  
  // Format using intl locale config
  const formattedValue2 = formatValue[{
    value: '500000',
    intlConfig: { locale: 'en-IN', currency: 'INR' },
  }];
  
  console.log[formattedValue2];
  // ₹5,00,000

  9 cho thành phần
• Các hàm onChange và

  - 1 -> 1.00
  - 123 -> 1.23
  - 12.3 -> 12.30
  - 12.34 -> 12.34

  6 có thể được truyền vào và sẽ được gọi với sự kiện ban đầu

lý luận

Khi thành phần này ngày càng được sử dụng nhiều hơn, tôi bắt đầu nhận được nhiều báo cáo lỗi và yêu cầu tính năng hơn. Tuy nhiên, đó không phải là vấn đề vì tôi luôn sẵn lòng sửa bất kỳ lỗi nào và triển khai bất kỳ tính năng nào nếu có thể.

Tuy nhiên, điều này có nghĩa là đôi khi tôi hơi hài lòng và không phải lúc nào cũng nghĩ về cách các tùy chọn khác nhau tương tác với nhau. Tôi thấy rằng nó hơi phức tạp theo ý thích của tôi và những lựa chọn mà tôi đã thực hiện trước đó trong quá trình phát triển, bây giờ có vẻ như nó có thể được cải thiện

Do đó, tôi đã tận dụng cơ hội của phiên bản v3 để cải tiến một chút thành phần này, nhằm làm cho nó có nhiều bằng chứng hơn trong tương lai và trực quan hơn để sử dụng

Làm cách nào tôi có thể đặt văn bản đầu vào trong HTML?

Định dạng nào được sử dụng cho số tiền đô la?