I have contact form with reCaptcha and using jQuery mCustomScrollbar plugin.
Problem : When I click on / focus on reCaptcha field, the page scrolls automatically to top of the div.
See Demo on Jsffidle, Code on Jsfiddle
note : if mscrollbar isn't working on jsfiddle, that is issue calling js and css from malihu site.
$(".scroller-back").mCustomScrollbar({
advanced:{
updateOnContentResize: true
}
});
Using autoScrollOnFocus: false
Auto-scrolling on elements that have focus (e.g. scrollbar automatically scrolls-to form textfields when the TAB key is pressed), values: true, false.
$(".scroller-back").mCustomScrollbar({
advanced:{
autoScrollOnFocus: false,
updateOnContentResize: true
}
});
It's working for all fields focus not auto scroll, how can I fix this issue without using autoScrollOnFocus: false
?
Solved
I'm using focus()
function and mCustomScrollbar function scrollTo
$("#recaptcha_response_field").focus(function() {
$(".scroller-back").mCustomScrollbar("scrollTo",this);
});
Code on Jsffidle
When the cursor has focus on recaptcha text field, the scroll will scrolling to on a line with recaptcha text field (scroll to self). But it's doesn't work when we use the tab key. I have tried with alert
$('#recaptcha_response_field').focus(function() {
alert('Handler for .focus() called.');
});
Updated
I'm using scrollTo with target id's submit button.
var a=Recaptcha.$("recaptcha_response_field");
$(a).focus(function() {
$(".scroller-back").mCustomScrollbar("scrollTo","#submit_button");
});
Code on Jsffidle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With