Làm thế nào để bạn nhập tiền tệ trong html?

Mới gần đây, chúng tôi đã triển khai một máy tính cho lợi tức tài sản. Vì vậy, trong máy tính của chúng tôi, rõ ràng là có một số trường nhập tiền tệ, nơi người dùng có thể nhập giá mua, v.v. Và các trường nhập này cần được định dạng bằng tiếng Đức, vì hầu hết người dùng của chúng tôi là người Đức

Vấn đề

Vấn đề khó chịu mà chúng tôi gặp phải là làm thế nào để hiển thị số được định dạng đồng thời sử dụng nó để tính toán một số giá trị khác, bởi vì không cho phép hiển thị định dạng tiếng Đức - 1.000,00

Ví dụ về giao diện người dùng bên dưới

lưu ý bên lề. chúng tôi sử dụng React-Intl để định dạng số thành đơn vị tiền tệ dành riêng cho ngôn ngữ

Dung dịch

Sau khi thử một số tùy chọn, chúng tôi đã đưa ra giải pháp đơn giản sau

Chúng tôi sử dụng khi trường đầu vào được đặt tiêu điểm và lưu giá trị ở trạng thái dưới dạng số để sử dụng trong tính toán. Khi trường đầu vào mất tiêu điểm (gọi lại onBlur), chúng tôi chuyển trường Đầu vào thành để hiển thị tiền tệ số được định dạng

Đoạn mã bên dưới

Bằng cách này, để hiển thị và tính toán cùng một giá trị, chúng ta không phải chuyển đổi nó từ số sang chuỗi và ngược lại. Ngoài ra, điều này yêu cầu thay đổi mã tối thiểu

Nhiều ứng dụng web lấy đầu vào từ người dùng bao gồm giá trị tiền tệ bằng một loại tiền tệ cụ thể. Ngày nay, các ứng dụng web này dựa trên các thư viện js của bên thứ ba có thể làm cho đầu vào thông thường hoạt động giống như một trường tiền tệ (dấu phân cách nghìn và phân số, ký hiệu tiền tệ, v.v.). Để tạo cơ hội cho trải nghiệm người dùng nhất quán hơn và công việc phát triển dễ dàng hơn cho các nhà phát triển web, tôi muốn đề xuất một loại đầu vào mới, loại đầu vào tiền tệ. Ví dụ về cách hiển thị bên dưới

Loại tiền tệ đầu vào960×720 84. 2KB

Định dạng giá trị của đơn vị tiền tệ được sử dụng được xác định bởi thuộc tính "tiền tệ" và thuộc tính 'ngôn ngữ' và trong trường phải được định dạng theo Số. toLocaleString('