Trang chủ Lập trình Javascript - HTML Vấn đề tự động scroll đến cuối trang của reCaptcha trên iOS

Vấn đề tự động scroll đến cuối trang của reCaptcha trên iOS

Hôm nay nhận được một yêu cầu của khách hàng mô tả về vấn đề của reCaptcha trên iOS. Cụ thể là khách hàng sử dụng reCaptcha cho form liên lạc để ngăn chặn spam và vấn đề ở đây là khi người dùng bấm vào để xác minh thì sau khi xác minh thành công thì trang web tự động scroll xuống dưới tận cùng. Kiểm tra trên máy tính, thiết bị Android thì bình thường và vấn đề này chỉ xảy ra trên các thiết bị iOS không kể bạn đang trình duyệt gì.

Lên mạng tìm thông tin thì đây là một vấn đề có thật của iOS và dường như chưa có cách xử lý triệt để. Và đây là cách giải quyết:

Thay vì gọi chỉ gọi thư viện API của reCaptcha từ url: https://www.google.com/recaptcha/api.js thì bạn sẽ truyền thêm tham biến (parameter) vào url này, kiểu như: https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit.

Trong đó onloadCallback là tên hàm bạn dùng để gọi khởi tạo reCaptcha cho form (thay vì chỉ cần chèn 1 thẻ DIV có chứa thông số sitekey). Và trong hàm này sẽ có tuỳ chọn callback cho phép bạn gọi hàm thực thi sau khi người dùng thực hiện xong thao tác xác minh. Hàm cụ thể như sau:

Giải thích đoạn mã ở trên:

onloacCallback là hàm khởi tạo reCaptcha cho một thẻ có ID là re-captcha và reCaptcha này có sitekey là 123456789987654321. Và mình sẽ gọi hàm focusForm để thực thi hành động sau khi người dùng xác mình xong.

Ở hàm focusForm mình sẽ kiểm tra thiết bị đang dùng nếu là iPhone hoặc iPad thì sẽ scroll lên thẻ contact-form.

Tóm lại cách giải quyết vấn đề là mình sẽ tận dụng hàm callback của hàm khởi tạo reCaptcha để gọi lệnh scroll từ đáy trang web lên một vị trí định sẵn. Như vậy là vấn đề chưa được giải quyết triệt để mà chỉ tạm thời vì khi croll thì màn hình hiển thị cũng sẽ chuyển động tạo cảm giác khó chịu cho người dùng.

Các bạn có thể đọc thêm tài liệu của Google dành cho developer tại: https://developers.google.com/recaptcha/docs/display.

Huỳnh Mai Anh Kiệt

- Advertisement -
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Hướng dẫn tạo bộ đếm lùi thời gian bằng JavaScript

Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy...

Hướng dẫn tạo hiệu ứng mưa rơi trên trang web với JavaScript

Quy Nhơn chớm bước vào mùa hè với nắng nóng. Những lúc thế này tự nhiên lại thèm những cơn mưa để giải tỏa...

Instagram ra mắt tính năng tạo chú thích tự động cho Stories và Reels

Tiếp bước TikTok, Instagram hiện cũng đã ra mắt tính năng tạo chú thích (caption) tự động của riêng mình. Tính năng mới này đã...

Facebook đã chính thức cập nhật tính năng “bong bóng chat” trên iPhone

Mới đây, Facebook đã chính thức cập nhật tính năng Chat Heads (hay còn gọi là bong bóng chat) trên iPhone, cho phép người...

Facebook Workplace đạt mốc 7 triệu người dùng trả phí

Vào thứ Ba vừa rồi, Facebook vừa mới thông báo ứng dụng Facebook Workplace của họ tính cho tới thời điểm hiện tại đã...

BẠN XEM CHƯA

Xóa địa chỉ email của mình ra khỏi các máy chủ gửi thư rác

Nếu thường xuyên sử dụng email thì trung bình một ngày có thể bạn có thể nhận được vài hoặc thậm chỉ vài chục...

Khắc phục lỗi dính chữ trong MS Word 2007

Nếu bạn dùng MS Word 2007 thì chắc đôi lần bạn sẽ gặp phải trường hợp bạn gặp 1 tập tin văn bản mà...

Xem lại lịch sử kết nối Facebook

Nếu bạn nghi ngờ ai đó đã kết nối vào tài khoản Facebook của bạn từ một thiết bị khác ở một khu vực...

Cách tính năm nhuận

Năm nay là năm 2016 và nó là năm nhuận nên cụ thể mai sẽ là ngày 29/2 chứ không phải là 1/3 như...

Ẩn nhanh các tác vụ đang hoạt động chỉ với 1 cú click

Vì một lý do nào đó bạn không muốn người khác biết bạn đang làm gì trên máy tính. Với những sự xuất hiện...