github/meteor-ionic
2
0
Fork 0
mirror of https://github.com/donl/meteor-ionic.git synced 2026-05-29 06:12:31 -06:00
Code Issues Projects Packages Wiki Activity Actions

fix long tapped input not focusing + floating input cursor on scroll

Browse source
This commit is contained in:
Gwen 2015-07-23 21:13:56 +02:00
parent 3328f3eede
commit f8cc762515
1 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/ionKeyboard/ionFocus.js
View file

@ -1,41 +1,45 @@
Meteor.startup(function() {
if (Meteor.isCordova) {
var getScrollContainer = function($element) {
return $($element.parents('.content.overflow-scroll').get(0));
}
// Scroll to make input on top of the page
// #TODO Correct behavior should be: if the input is behind the keyboard, scroll to make it visible on top of the keyboard
var scrollToFocusedElement = function($focused) {
$focused = $focused || $(':focus');
var $container = $($focused.parents('.content.overflow-scroll').get(0));
var $container = getScrollContainer($focused);
if (!$focused.length || !$container.length) return;
var contentOffset = $container.offset().top;
var padding = 10;
var scrollTo = $container.scrollTop() + $focused.offset().top - contentOffset - padding;
setTimeout(function() {
$container.animate({ scrollTop: scrollTo }, 400, function() {
// #TODO fix floating input cursor bug (https://github.com/twbs/bootstrap/issues/14708, https://github.com/cubiq/iscroll/issues/178)
// Fix floating input cursor bug (https://github.com/twbs/bootstrap/issues/14708, https://github.com/cubiq/iscroll/issues/178)
var display = $focused.css('display');
$focused.css({ display: 'none' }).css({ display: display });
});
// $container.scrollTop(scrollTo);
}, 0);
}
var scrollPosStart, scrollPosEnd, scrollDistance, scrollHappened, scrollThreshold = 10;
var $scrollContainer, scrollPosStart, scrollPosEnd, scrollDistance, scrollHappened, scrollThreshold = 10;
// Fix for input not getting focused on long touch (more than a few ms)
// Trigger focus on input through touchend for long taps
$(document).on('touchstart', function(event) {
scrollPosStart = $('.content.overflow-scroll').scrollTop();
$scrollContainer = getScrollContainer($(event.target));
scrollPosStart = $scrollContainer.scrollTop();
});
$(document).on('touchend', function(event) {
scrollPosEnd = $('.content.overflow-scroll').scrollTop();
$scrollContainer = getScrollContainer($(event.target));
scrollPosEnd = $scrollContainer.scrollTop();
scrollDistance = Math.abs(scrollPosStart - scrollPosEnd);
scrollHappened = scrollDistance > scrollThreshold;
var $target = $(event.target);
var isInput = _.contains(['INPUT', 'TEXTAREA'], event.target.tagName);
var isFocused = $target.is(':focus');
if (!isInput || isFocused || scrollHappened) return;
$target.focus();
if (isInput && !isFocused && !scrollHappened) $target.focus();
});
$(document).delegate('input, textarea', 'focus', function(event) {