Make login text input field touch capable (thx @TabscoEye)

This commit is contained in:
PizZaKatZe 2021-02-03 23:11:19 +01:00
parent 8cdf572685
commit c7dcaec940

View File

@ -1,46 +1,68 @@
const IGNORED_KEYS = new Set([
'Esc',
'Escape',
'Alt',
'Meta',
'Control',
'Ctrl',
'Space',
'Backspace'
])
export class TextInput extends Phaser.GameObjects.BitmapText { export class TextInput extends Phaser.GameObjects.BitmapText {
private minUnderLineLength = 4; private minUnderLineLength = 4;
private underLine: Phaser.GameObjects.Text; private underLine: Phaser.GameObjects.Text;
private domInput = document.createElement('input');
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) { constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string,
onChange: (text: string) => void) {
super(scene, x, y, 'main_font', text, 32); super(scene, x, y, 'main_font', text, 32);
this.setOrigin(0.5).setCenterAlign() this.setOrigin(0.5).setCenterAlign();
this.scene.add.existing(this); this.scene.add.existing(this);
this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'}) const style = {fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'};
this.underLine.setOrigin(0.5) this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), style);
this.underLine.setOrigin(0.5);
this.domInput.maxLength = maxLength;
this.domInput.style.opacity = "0";
if (text) {
this.domInput.value = text;
}
this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => { this.domInput.addEventListener('keydown', event => {
if (event.keyCode === 8 && this.text.length > 0) { if (IGNORED_KEYS.has(event.key)) {
this.deleteLetter(); return;
} else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
this.addLetter(event.key);
} }
if (!/[a-zA-Z0-9:.!&?()+-]/.exec(event.key)) {
event.preventDefault();
}
});
this.domInput.addEventListener('input', (event) => {
if (event.defaultPrevented) {
return;
}
this.text = this.domInput.value;
this.underLine.text = this.getUnderLineBody(this.text.length); this.underLine.text = this.getUnderLineBody(this.text.length);
onChange(this.text); onChange(this.text);
}); });
document.body.append(this.domInput);
this.focus();
} }
private getUnderLineBody(textLength:number): string { private getUnderLineBody(textLength:number): string {
if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength; if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength;
let text = '_______'; let text = '_______';
for (let i = this.minUnderLineLength; i < textLength; i++) { for (let i = this.minUnderLineLength; i < textLength; i++) {
text += '__' text += '__';
} }
return text; return text;
} }
private deleteLetter() {
this.text = this.text.substr(0, this.text.length - 1);
}
private addLetter(letter: string) {
this.text += letter;
}
getText(): string { getText(): string {
return this.text; return this.text;
} }
@ -56,4 +78,13 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
this.underLine.y = y+1; this.underLine.y = y+1;
return this; return this;
} }
focus() {
this.domInput.focus();
}
destroy(): void {
super.destroy();
this.domInput.remove();
}
} }