fix(keyboard): shrink scrollView on date and select focus on iOS

This commit is contained in:
Tim Lancina
2015-03-02 15:40:48 -06:00
parent f71c04dd2a
commit 4636cb0ee4
3 changed files with 74 additions and 6 deletions

View File

@@ -143,8 +143,9 @@ function keyboardNativeShow(e) {
}
function keyboardBrowserFocusIn(e) {
if( !e.target || e.target.readOnly || !ionic.tap.isTextInput(e.target) || ionic.tap.isDateInput(e.target) || !keyboardIsWithinScroll(e.target) ) return;
if( !e.target || e.target.readOnly || !ionic.tap.isKeyboardElement(e.target) || !keyboardIsWithinScroll(e.target) ) return;
console.log("keyboardBrowserFocusIn");
document.addEventListener('keydown', keyboardOnKeyDown, false);
document.body.scrollTop = 0;

View File

@@ -162,7 +162,7 @@ ionic.tap = {
return !!ele &&
(ele.tagName == 'TEXTAREA' ||
ele.contentEditable === 'true' ||
(ele.tagName == 'INPUT' && !(/^(radio|checkbox|range|file|submit|reset)$/i).test(ele.type)));
(ele.tagName == 'INPUT' && !(/^(radio|checkbox|range|file|submit|reset|color|image|button)$/i).test(ele.type)));
},
isDateInput: function(ele) {
@@ -170,6 +170,14 @@ ionic.tap = {
(ele.tagName == 'INPUT' && (/^(date|time|datetime-local|month|week)$/i).test(ele.type));
},
isKeyboardElement: function(ele) {
if ( !ionic.Platform.isIOS() ) {
return ionic.tap.isTextInput(ele) && !ionic.tap.isDateInput(ele);
} else {
return ionic.tap.isTextInput(ele) || ( !!ele && ele.tagName == "SELECT");
}
},
isLabelWithTextInput: function(ele) {
var container = tapContainingElement(ele, false);
@@ -181,7 +189,7 @@ ionic.tap = {
return ionic.tap.isTextInput(ele) || ionic.tap.isLabelWithTextInput(ele);
},
cloneFocusedInput: function(container, scrollIntance) {
cloneFocusedInput: function(container) {
if (ionic.tap.hasCheckedClone) return;
ionic.tap.hasCheckedClone = true;
@@ -189,7 +197,7 @@ ionic.tap = {
var focusInput = container.querySelector(':focus');
if (ionic.tap.isTextInput(focusInput)) {
var clonedInput = focusInput.cloneNode(true);
clonedInput.value = focusInput.value;
clonedInput.classList.add('cloned-text-input');
clonedInput.readOnly = true;
@@ -207,7 +215,7 @@ ionic.tap = {
hasCheckedClone: false,
removeClonedInputs: function(container, scrollIntance) {
removeClonedInputs: function(container) {
ionic.tap.hasCheckedClone = false;
ionic.requestAnimationFrame(function() {
@@ -509,7 +517,7 @@ function tapFocusOutActive() {
function tapFocusIn(e) {
// Because a text input doesn't preventDefault (so the caret still works) there's a chance
// that it's mousedown event 300ms later will change the focus to another element after
// that its mousedown event 300ms later will change the focus to another element after
// the keyboard shows up.
if (tapEnabledTouchEvents &&