[Rails] Chuyển đổi Fullwidth number to halfwidth, Tự động thêm dấu phẩy sau hàng nghìn

Khi làm việc với bất kì ngôn ngữ lập trình nào thì việc kiểm tra tính hợp lệ của các dữ liệu input là điều không thể thiếu, đặc biệt khi validate number thông qua các dạng form. Bài viết này sẽ giới thiệu cho bạn về cách nhập input kiểu bàn phím tiếng nhật: hiragana, katakana… chỉ nhập number và tự động chuyển về dạng dấu phẩy sau hàng nghìn: 1,234,567,890.

1. Bắt đầu

Viết đoạn code javascript này vào file application.js

$(document).on('keyup input', 'input.auto-numberic', function(event){
  var selection = window.getSelection().toString();
  if( selection !== '' ){
    return;
  }

  var $this = $(this);

  var input = $this.val();

  input = input.toHalfWidth().replace(/[\D\s\._\-]+/g, "");

  $this.val( function() {
    return input ? parseInt(input, 10).toLocaleString( "en-US" ) : "";
  });
});

String.prototype.toHalfWidth = function() {
  return this.replace(/[Ａ-Ｚａ-ｚ０-９]/g, 
    function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)});
};

2.Sử dụng

ở view khi cần sử dụng chỉ cần gọi ra:
ví dụ:

<%= form_for @example do |f| %>
    <%= f.text_field :name, class: "auto-numberic " %>
<% end%>

Đoạn code trên để nhập input chỉ với kiểu number, Sau khi nhập chuyển từ Fullwidth sang Halfwidth với bàn phím tiếng nhật, và tự động thêm dấu phẩy sau hàng nghìn: 12,345

3.Cài Đặt Bộ Gõ Tiếng Nhật Trên Ubuntu

Bước 1: Click vào Dash home

Bước 2: Tìm kiếm Language Support.

Bước 3: Click vào icon Language Support

Bước 4: Nếu bạn nhận được thông báo language support is not installed completely thì click vào Install để cài đặt.

Bước 5: Tại cửa sổ Language Support chọn Language tab sau đó click vào Install / Remove Languages…

Bước 6: Tại cửa sổ Installed Languages bạn kéo xuống và chọn Japanese sau đó check vào Installed. Click Apply.

Bước 7: Gõ mật khẩu và chờ hệ thống tải gói Japanese IME.

Bước 8: Trở lại cửa sổ Language Support , chọn IBus tại dòng Keyboard input method system, sau đó chọn Close.

Bước 9: Để cài đặt có hiệu lực thì chúng ta Log Out sau đó Log In

Bước 10: Sau khi log in trở lại, click vào language icon phía trên top panel rồi chọn Text Entry Settings…

Bước 11: Click dấu + tại cửa sổ Input sources to use area.

Bước 12: Tại cửa sổ Choose an input source screen, bạn kéo xuống và chọn Japanese (Mozc) (IBus). Sau đó click Add

Bước 13: Lúc này tại language icon phía trên đã xuất hiện bộ gõ tiếng Nhật Mozc. Bạn click vào Mozc

Bước 14: Language icon sẽ chuyển thành Mozc icon

Bước 15: Click vào Mozc icon và chọn kiểu gõ tiếng Nhật bạn muốn sử dụng.

Trên đây là một chia sẻ nhỏ của mình, hy vọng nó sẽ hữu ích với các bạn. cảm ơn các bạn đã theo dõi bãi viết !!