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://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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ải video ngắn Facebook Reel miễn phí

Facebook Reels là tính năng video ngắn mới của Facebook. Nếu bạn muốn tải những video ngắn này của mọi người thì bạn có...

Lập Trình Viên 25 Tuổi Kiếm Được $30.000 Mỗi Tháng Từ Các Ứng Dụng Shopify

Mat De Sousa là một doanh nhân Pháp, anh là người đứng sau 2 ứng dụng Shopify là Wide Bundles và WideReview do chính...

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

BẠN XEM CHƯA

Chuyện giáo dục lòng hiếu thảo ở xứ người

Người Hàn Quốc bắt chước mô hình giáo dục của Nhật Bản để cố gắng tạo ra 1 xã hội đức trị. Môn Đức...

4 cách “trốn chạy” những kẻ quấy rối trên Facebook Chat

Cũng giống như trình chat Yahoo! Messenger thì trên Facebook chắc hẳn bạn cũng gặp không ít những kẻ chuyên quấy rối mình thông...

Yêu anh đi

Yêu anh đi, em không cần đổi tên Facebook. Em cứ an tâm "chém gió" Mọi rắc rối nếu có cứ để anh lo... Huỳnh Mai Anh...

Netflix bắt đầu chặn các dịch vụ VPN

Nếu bạn đang sử dụng một mạng riêng ảo, proxy hoặc một công cụ ẩn danh để truy cập Netflix thì có thể bạn...

Hướng dẫn tạo video… hư cấu

Hôm nay bài viết này sẽ chia sẻ với các bạn một trang web dịch vụ tạo ra một video... hư cấu. Hư cấu...