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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var focusForm = function (response) { var uagent = navigator.userAgent.toLowerCase(); if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1){ $("html, body").animate({ scrollTop: $("#contact-form").offset().top }, "slow"); } }; var onloadCallback = function () { var widget = grecaptcha.render(document.getElementById("re-captcha"), { 'sitekey' : "123456789987654321", 'theme': "light", 'callback' : focusForm }); } |
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
