diff --git a/src/Input.ts b/src/Input.ts index 39aa03a2..df5bb94e 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -1,4 +1,4 @@ -import { Texture, Ticker, utils } from '@pixi/core'; +import { isMobile, Texture, Ticker, utils } from '@pixi/core'; import { Container, IDestroyOptions } from '@pixi/display'; import { Graphics } from '@pixi/graphics'; import { NineSlicePlane } from '@pixi/mesh-extras'; @@ -117,18 +117,7 @@ export class Input extends Container utils.isMobile.any && this.handleActivation(); // handleActivation always call before this function called. }); - if (utils.isMobile.any) - { - window.addEventListener('touchstart', this.handleActivationBinding); - } - else if (!utils.isMobile.any) - { - window.addEventListener('click', this.handleActivationBinding); - - window.addEventListener('keyup', this.onKeyUpBinding); - - window.addEventListener('input', this.onInputBinding as EventListener); - } + window.addEventListener(isMobile.any ? 'touchstart' : 'click', this.handleActivationBinding); this.onEnter = new Signal(); this.onChange = new Signal(); @@ -154,6 +143,10 @@ export class Input extends Container { const key = e.key; + const keysToSkip = ['Shift', 'Control', 'Alt', 'Meta', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; + + if (keysToSkip.includes(key)) return; + if (key === 'Backspace') { this._delete(); @@ -164,9 +157,17 @@ export class Input extends Container } else if (key.length === 1) { + this._add(key); } - else if (this.lastInputData && this.lastInputData.length === 1) this._add(this.lastInputData); + else if (this.lastInputData && this.lastInputData.length === 1) + { + this._add(this.lastInputData); + } + + if (this.input) { + this.input.value = ''; + } } protected init() @@ -302,10 +303,7 @@ export class Input extends Container this.placeholder.visible = false; this._cursor.alpha = 1; - if (utils.isMobile.any) - { - this.createInputField(); - } + this.createInputField(); this.align(); } @@ -315,7 +313,7 @@ export class Input extends Container if (this.input) { this.input.removeEventListener('blur', this.stopEditingBinding); - this.input.removeEventListener('keyup', this.onKeyUpBinding); + this.input.removeEventListener('keydown', this.onKeyUpBinding); this.input.removeEventListener('input', this.onInputBinding as EventListener); this.input?.blur(); @@ -353,7 +351,7 @@ export class Input extends Container } input.addEventListener('blur', this.stopEditingBinding); - input.addEventListener('keyup', this.onKeyUpBinding); + input.addEventListener('keydown', this.onKeyUpBinding); input.addEventListener('input', this.onInputBinding as EventListener); this.input = input; @@ -363,6 +361,8 @@ export class Input extends Container protected handleActivation() { + if (this.editing) return; + this.stopEditing(); if (this.activation) @@ -387,12 +387,9 @@ export class Input extends Container if (this.value.length === 0) this.placeholder.visible = true; - if (utils.isMobile.any) - { - this.input?.blur(); - this.input?.remove(); - this.input = null; - } + this.input?.blur(); + this.input?.remove(); + this.input = null; this.align(); @@ -551,18 +548,7 @@ export class Input extends Container { this.off('pointertap'); - if (utils.isMobile.any) - { - window.removeEventListener('touchstart', this.handleActivationBinding); - } - else if (!utils.isMobile.any) - { - window.removeEventListener('click', this.handleActivationBinding); - - window.removeEventListener('keyup', this.onKeyUpBinding); - - window.removeEventListener('input', this.onInputBinding as EventListener); - } + window.removeEventListener(isMobile.any ? 'touchstart' : 'click', this.handleActivationBinding); super.destroy(options); }