javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(focusOut): ability to blur focused element, close keyboard

Browse Source
This commit is contained in:
Adam Bradley
2015-10-08 20:08:15 -05:00
parent fa499e00c8
commit 0ef061c232
3 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ionic/components/form/form.scss
View File

@ -66,27 +66,33 @@ select[readonly] {
// Focus Utils // Focus Utils
// ------------------------------- // -------------------------------
focus-holder input { focus-ctrl {
position: fixed;
input,
button {
position: fixed; position: fixed;
top: 1px; top: 1px;
width: 9px; width: 9px;
left: -9999px; left: -9999px;
z-index: 9999; z-index: 9999;
}
} }
/*focus-holder input[tabindex="999"] {
/*focus-ctrl input[tabindex="999"] {
left: 0px; left: 0px;
} }
focus-holder input[tabindex="1001"] { focus-ctrl input[tabindex="1001"] {
left: 20px; left: 20px;
} }
focus-holder input[tabindex="1002"] { focus-ctrl input[tabindex="1002"] {
left: auto; left: auto;
right: 10px; right: 10px;
} }
focus-holder input:focus { focus-ctrl input:focus {
background: red; background: red;
}*/ }*/

37
ionic/components/form/form.ts
View File

@ -28,9 +28,7 @@ export class IonicForm {
this._focused = null; this._focused = null;
zone.runOutsideAngular(() => { zone.runOutsideAngular(() => {
if (this._config.get('keyboardScrollAssist')) { this.initHolders(document, this._config.get('keyboardScrollAssist'));
this.initHolders(document);
}
if (this._config.get('keyboardInputListener') !== false) { if (this._config.get('keyboardInputListener') !== false) {
this.initKeyInput(document); this.initKeyInput(document);
@ -78,29 +76,37 @@ export class IonicForm {
document.addEventListener('keydown', keyDown); document.addEventListener('keydown', keyDown);
} }
initHolders(document) { initHolders(document, scrollAssist) {
// raw DOM fun // raw DOM fun
this._holder = document.createElement('focus-holder'); this._ctrl = document.createElement('focus-ctrl');
this._ctrl.setAttribute('aria-hidden', true);
if (scrollAssist) {
this._prev = document.createElement('input'); this._prev = document.createElement('input');
this._prev.tabIndex = NO_FOCUS_TAB_INDEX; this._prev.tabIndex = NO_FOCUS_TAB_INDEX;
this._holder.appendChild(this._prev); this._ctrl.appendChild(this._prev);
this._next = document.createElement('input'); this._next = document.createElement('input');
this._next.tabIndex = NO_FOCUS_TAB_INDEX; this._next.tabIndex = NO_FOCUS_TAB_INDEX;
this._holder.appendChild(this._next); this._ctrl.appendChild(this._next);
this._temp = document.createElement('input'); this._temp = document.createElement('input');
this._temp.tabIndex = NO_FOCUS_TAB_INDEX; this._temp.tabIndex = NO_FOCUS_TAB_INDEX;
this._holder.appendChild(this._temp); this._ctrl.appendChild(this._temp);
}
document.body.appendChild(this._holder); this._blur = document.createElement('button');
this._blur.tabIndex = NO_FOCUS_TAB_INDEX;
this._ctrl.appendChild(this._blur);
document.body.appendChild(this._ctrl);
function preventDefault(ev) { function preventDefault(ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
} }
if (scrollAssist) {
this._prev.addEventListener('keydown', preventDefault); this._prev.addEventListener('keydown', preventDefault);
this._next.addEventListener('keydown', preventDefault); this._next.addEventListener('keydown', preventDefault);
this._temp.addEventListener('keydown', preventDefault); this._temp.addEventListener('keydown', preventDefault);
@ -129,6 +135,15 @@ export class IonicForm {
document.addEventListener('focusout', queueReset); document.addEventListener('focusout', queueReset);
} }
}
focusOut() {
console.debug('focusOut')
this._blur.tabIndex = NORMAL_FOCUS_TAB_INDEX;
this._blur.focus();
this._blur.tabIndex = NO_FOCUS_TAB_INDEX;
}
setFocusHolder(type) { setFocusHolder(type) {
if (this._temp) { if (this._temp) {
this._temp.tabIndex = TEMP_TAB_INDEX; this._temp.tabIndex = TEMP_TAB_INDEX;
@ -216,8 +231,7 @@ export class IonicForm {
if (index > -1 && (index + inc) < this._inputs.length) { if (index > -1 && (index + inc) < this._inputs.length) {
let siblingInput = this._inputs[index + inc]; let siblingInput = this._inputs[index + inc];
if (siblingInput) { if (siblingInput) {
siblingInput.initFocus(); return siblingInput.initFocus();
return;
} }
} }
this._focused.initFocus(); this._focused.initFocus();
@ -232,4 +246,3 @@ const PREV_TAB_INDEX = 999;
const ACTIVE_FOCUS_TAB_INDEX = 1000; const ACTIVE_FOCUS_TAB_INDEX = 1000;
const NEXT_TAB_INDEX = 1001; const NEXT_TAB_INDEX = 1001;
const TEMP_TAB_INDEX = 2000; const TEMP_TAB_INDEX = 2000;

2
ionic/components/text-input/text-input.ts
View File

@ -322,8 +322,6 @@ export class TextInput {
// ensure the body hasn't scrolled down // ensure the body hasn't scrolled down
document.body.scrollTop = 0; document.body.scrollTop = 0;
this.form.resetInputs();
}); });
if (this.scrollAssist && this.scrollView) { if (this.scrollAssist && this.scrollView) {