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 khai báo thuế TNCN trực tuyến cho cá nhân mảng kinh doanh nội dung số

Mình là 1 freelancer kiểu kiếm tiền trực tuyến mà được ngành thuế đưa vào mảng cá nhân kinh doanh nội dung số. Nếu...

Bột ngọt Vị Hương Tố – Thương hiệu bột ngọt nổi tiếng trước 75 và ly kỳ chuyện “châu chấu đá xe”

Hai nhãn hiệu Ajinomoto và Vedan có mặt tại Việt Nam vào thập niên 1950, đã chiếm lĩnh toàn bộ thị trường trong nước....

Pixel 6, chiếc điện thoại sắp ra mắt của Google

Nổi tiếng với danh hiệu "cha đẻ của hệ điều hành Android", nhưng ít ai biết Google cũng sở hữu cho mình một dòng...

Chụp ảnh nguyên trang web với công cụ trực tuyến Site-Shot

Ngày nay có rất nhiều công cụ giúp bạn chụp ảnh màn hình và trong số đó cũng có nhiều công cụ hỗ trợ...

Cách tạo thanh thông báo trượt trên đầu trang web Shopify

Thông báo trên đầu trang (announcement bar) là vị trí cũng như giải pháp tốt nhất để truyền tải thông điệp đến khách truy...

BẠN XEM CHƯA

Website Đại học Quy Nhơn chuyển hướng đến trang web lạ

Thời điểm hiện tại khi truy cập vào trang web của trường Đại học Quy Nhơn tại địa chỉ (www.qnu.edu.vn) thì người dùng sẽ...

Phần mềm Việt Nam đầu tiên bán ra nước ngoài

Nếu bây giờ đặt câu hỏi: "Phần mềm Việt Nam đầu tiên bán ra nước ngoài vào năm nào?" thì chắc rằng 99.99% mọi...

Clementine Player hỗ trợ nghe nhạc trực tuyến từ nhiều nguồn

Có rất nhiều chương trình hỗ trợ người dùng nghe nhạc từ thư viện nhạc trên máy tính và kể cả những thư viện...

Instagram for Kids chưa ra mắt đã bị phản đối kịch liệt

Tháng trước, Instagram đã bị rò rỉ thông tin nội bộ về việc phát hành một mạng xã hội mới cho trẻ em dưới...

Google sẽ bỏ ứng dụng AdSense trên Android và iOS trong năm nay

Google AdSense là một dịch vụ quảng cáo trên Internet được Google ra mắt cho chủ sở hữu trang web (nhà xuất bản). Với...