Cách làm 1 Chatbox trên Web vs Mobile giống như Chatwork

Giới thiệu

Hôm nay mình sẽ chia sẻ cách làm 1 box chat hiển thị tốt trên các trình duyệt và Mobile. Bình thường khi chúng ta làm giao diện phần gửi tin nhắn, chúng ta chỉ đặt mỗi cái textarea vào rồi đặt cho nó chiều cao cố định khi text message nhập dài sẽ hiện thị scroll, trên Web có thể không sao nhưng trên Mobile sẽ gây khó dùng và đặc biệt nhất là cái vấn đề mình gặp gần đây đó là gõ text tiếng Nhật sẽ bị khung gợi ý đè chèn vào phần bạn đang typing. Để giải quyết vấn đề trên mình đã làm 1 khung chat kiểu giống như các Service hiện đại bây giờ như Chatwork hay Messenger, Cách hoạt động của nó là sẽ tăng chiều chiều cao dựa theo độ dài của text bạn gõ theo chiều từ dưới lên trên. Đây là khung chat gửi message mình đã làm như vậy, nó hiển thị tốt về UI/UX trên cả Web vs Mobile.

Demo thực tế

Các bạn xem trên Codepen mình viết nhé.

Lời kết

Chỉ 1 chút HTML, CSS, Javascript thôi là chúng ta có thể làm ra được khung chat rất đơn giản có thể dùng áp dụng vào bất cứ dự án nào trong tương lại ,tốt cả về UI lẫn UX. Đây cũng là kinh nghiệm thực tế mình gặp khi làm dự án, dù nhỏ thôi nhưng mình nghĩ chia sẻ lên cộng đồng Viblo biết đâu có nhiều bạn đang cần có thể tham khảo